FE: KSQL: Implement sorting (#3433)

* Resolves #3171 - enable ksql tables, streams sorting

* enable ksql tables, streams sorting
- make memoized onSortingChange, onPaginationChange depend on location

* fix linting

* edit Table.tsx imports

* fix linting

---------

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/KsqlDb/TableView.tsx

@@ -31,7 +31,7 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
       data={rows || []}
       columns={columns}
       emptyMessage={fetching ? 'Loading...' : 'No rows found'}
-      enableSorting={false}
+      enableSorting
     />
   );
 };

kafka-ui-react-app/src/components/common/NewTable/Table.tsx

@@ -14,7 +14,7 @@ import type {
   PaginationState,
   ColumnDef,
 } from '@tanstack/react-table';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useLocation } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { Button } from 'components/common/Button/Button';
 import Input from 'components/common/Input/Input';
@@ -129,6 +129,7 @@ const Table: React.FC<TableProps<any>> = ({
   onRowClick,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
   const [rowSelection, setRowSelection] = React.useState({});
   const onSortingChange = React.useCallback(
     (updater: UpdaterFn<SortingState>) => {
@@ -136,7 +137,7 @@ const Table: React.FC<TableProps<any>> = ({
       setSearchParams(searchParams);
       return newState;
     },
-    [searchParams]
+    [searchParams, location]
   );
   const onPaginationChange = React.useCallback(
     (updater: UpdaterFn<PaginationState>) => {
@@ -145,7 +146,7 @@ const Table: React.FC<TableProps<any>> = ({
       setRowSelection({});
       return newState;
     },
-    [searchParams]
+    [searchParams, location]
   );
 
   const table = useReactTable({