Repository: provectus/kafka-ui
Issue: KSQL: Implement sorting
Labels: type/enhancement
good first issue
scope/backend
scope/frontend
status/accepted

<!--

Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
https://github.com/provectus/kafka-ui/issues
https://github.com/provectus/kafka-ui/discussions

-->

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
1. Neither Tables nor Streams tab have any options to Search, default sorting or user defined sorting by clicking the column names.
2. Not possible to see the Table or Stream details by clicking the row in the table ([task #790](https://github.com/provectus/kafka-ui/issues/790)).

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
1. Add search by the tab columns.
2. Add the Default sorting for the tab (by the Name?).
3. Add custom sorting by the column names.
4. Table and Stream detailed info is handled in a separate task #790

**Set up**
<!--
How do you run the app? Please provide as much info as possible:
1. App version (docker image version or check commit hash in the top left corner in UI)
6. Helm chart version, if you use one
7. Any IAAC configs

We might close the issue without further explanation if you don't provide such information.
-->
[f4e6afe](https://github.com/provectus/kafka-ui/commit/f4e6afe)

**Steps to Reproduce**
<!-- We'd like you to provide an example setup (via docker-compose, helm, etc.) 
to reproduce the problem, especially with a complex setups. -->
1. Log in to Kafka UI and navigate to the KSQL DB.

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->
![image](https://user-images.githubusercontent.com/112083452/209829037-c31bc295-bf22-4aeb-9119-83e006d39d12.png)



**Additional context**
<!--
(Add any other context about the problem here)
-->
@Haarolean requested to create a separate issue from the #2651 

Issue comments:
Hey @Haarolean! I've been using kafka-ui at my job for a few months and would like to contribute. Would you assign the issue to me?
@michal-cesek hey, sure! 
You can refer to [contributing](https://provectus.gitbook.io/kafka-ui/development/contributing) guide as a start

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/KsqlDb/TableView.tsx b/kafka-ui-react-app/src/components/KsqlDb/TableView.tsx
index d27e4968b7f..538345954da 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/TableView.tsx
+++ b/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
     />
   );
 };
diff --git a/kafka-ui-react-app/src/components/common/NewTable/Table.tsx b/kafka-ui-react-app/src/components/common/NewTable/Table.tsx
index 55652df082d..da1f2c090a4 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/Table.tsx
+++ b/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({


Test patch: