EPMRPP-92222 || Update sorting for the table component

src/components/table/table.stories.tsx

@@ -114,6 +114,7 @@ export const Default: Story = {
         <Table
           {...args}
           data={tableData}
+          sortableColumns={[primaryColumn.key]}
           onChangeSorting={(sortConfigParam = sortConfig) => {
             let { direction } = sortConfigParam;
             const { key } = sortConfigParam;

src/components/table/table.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind';
 import { ArrowDownIcon, ArrowUpIcon } from '@components/icons';
 import { FixedColumn, PrimaryColumn, RowData, TableComponentProps, SortDirection } from './types';
 import { Checkbox } from '@components/checkbox';
+import { getColumnsKeys } from './utils';
 
 const cx = classNames.bind(styles);
 
@@ -17,6 +18,7 @@ export const Table: FC<TableComponentProps> = ({
   selectedRowIds = [],
   sortingDirection = SortDirection.ASC,
   sortingColumn = primaryColumn,
+  sortableColumns = getColumnsKeys([primaryColumn, ...fixedColumns]),
   onChangeSorting = () => {},
   onToggleRowSelection = () => {},
   onToggleAllRowsSelection = () => {},
@@ -29,6 +31,7 @@ export const Table: FC<TableComponentProps> = ({
   }, [primaryColumn, fixedColumns]);
 
   const handleSort = (key: string) => {
+    if (!sortableColumns.includes(key)) return;
     onChangeSorting({ key, direction: sortingDirection });
   };
 
@@ -72,6 +75,7 @@ export const Table: FC<TableComponentProps> = ({
   };
 
   const getSortIcon = (columnKey: string) => {
+    if (!sortableColumns.includes(columnKey)) return;
     if (sortingColumn?.key === columnKey) {
       return sortingDirection === SortDirection.ASC ? <ArrowUpIcon /> : <ArrowDownIcon />;
     }

src/components/table/types.ts

@@ -20,7 +20,7 @@
 }
 export interface RowData {
   id: string | number;
   [key: string]: DetailedCellData | RowConfigs | string | number | any;
   rowConfigs?: RowConfigs;
 }
 export enum SortDirection {
@@ -41,6 +41,7 @@
   selectedRowIds?: (string | number)[];
   sortingDirection?: SortDirection;
   sortingColumn?: Column;
+  sortableColumns?: string[];
   onChangeSorting?: (sortConfig?: SortConfig) => void;
   onToggleRowSelection?: (id: string | number) => void;
   onToggleAllRowsSelection?: () => void;

src/components/table/utils.ts

@@ -1,4 +1,4 @@
-import { RowData, SortConfig, SortDirection } from './types';
+import { Column, RowData, SortConfig, SortDirection } from './types';
 
 export const sortTableData = (tableData: RowData[], sortConfig?: SortConfig): RowData[] => {
   if (sortConfig) {
@@ -17,3 +17,7 @@ export const sortTableData = (tableData: RowData[], sortConfig?: SortConfig): Ro
   }
   return tableData;
 };
+
+export const getColumnsKeys = (columns: Column[]): string[] => {
+  return columns.map((column) => column.key);
+};