feat: Implement sortable functionality in MultiLevelTable component (#8)

* feat: Implement sortable functionality in MultiLevelTable component

- Added `sortable` prop to MultiLevelTable and TableHeader components.
- Introduced custom sorting logic for the 'Status' column.
- Updated styles to indicate sortable columns with a pointer cursor.
- Enhanced table header to conditionally render sorting indicators based on column state.

* refactor: Move sort types to constant

* fix: Fix lint errors

* feat: Accept custom sort icons

Author: athirapbabu

src/App.tsx

@@ -373,6 +373,14 @@ const columns = [
     key: "status",
     title: "Status",
     filterable: true,
+    sortable: true,
+    customSortFn: (rowA: any, rowB: any, columnId: string) => {
+      const statusOrder = { 'Active': 0, 'Pending': 1, 'Inactive': 2 };
+      const statusA = String(rowA[columnId]);
+      const statusB = String(rowB[columnId]);
+      
+      return (statusOrder[statusA as keyof typeof statusOrder] || 0) - (statusOrder[statusB as keyof typeof statusOrder] || 0);
+    },
     render: (value: unknown) => (
       <span
         style={{
@@ -411,6 +419,9 @@ function App() {
         data={data}
         columns={columns}
         pageSize={5}
+        sortable={true}
+        ascendingIcon={<div>↑</div>}
+        descendingIcon={<div>↓</div>}
         renderCustomPagination={renderCustomPagination}
       />
     </div>

src/components/MultiLevelTable.tsx

@@ -7,6 +7,7 @@ import { Pagination } from "./Pagination";
 import type { PaginationProps } from "./Pagination";
 import { TableHeader } from "./TableHeader";
 import { TableRow } from "./TableRow";
+import { SortType } from '../constants/sort';
 import type {
   Column,
   DataItem,
@@ -30,6 +31,9 @@ export interface MultiLevelTableProps {
   childrenKey?: string;
   pageSize?: number;
   renderCustomPagination?: (props?: PaginationProps) => React.ReactNode;
+  sortable?: boolean;
+  ascendingIcon?: React.ReactNode;
+  descendingIcon?: React.ReactNode;
 }
 
 /**
@@ -44,6 +48,9 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
   childrenKey = "children",
   pageSize = 10,
   renderCustomPagination = null,
+  sortable = false,
+  ascendingIcon,
+  descendingIcon,
 }) => {
   const [filterInput, setFilterInput] = useState("");
   const [expandedRows, setExpandedRows] = useState<Set<string | number>>(
@@ -80,6 +87,9 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
     return columns.map((col) => ({
       Header: col.title,
       accessor: col.key,
+      disableSortBy: sortable ? col.sortable === false : true,
+      sortType: col.customSortFn ? SortType.Custom : SortType.Basic,
+      sortFn: col.customSortFn,
       Cell: ({ row, value }: { row: Row<DataItem>; value: unknown }) => {
         const item = row.original;
 
@@ -102,7 +112,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
         )
         : undefined,
     }));
-  }, [columns, filterInput]);
+  }, [columns, filterInput, sortable]);
 
   // Initialize table with react-table hooks
   const {
@@ -125,9 +135,20 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
       columns: tableColumns,
       data,
       initialState: { pageSize } as TableStateWithPagination<DataItem>,
+      // @ts-expect-error - sortTypes is not included in the type definition but is supported by react-table
+      sortTypes: {
+        custom: (rowA: Row<DataItem>, rowB: Row<DataItem>, columnId: string) => {
+          const column = columns.find(col => col.key === columnId);
+
+          if (column?.customSortFn) 
+            return column.customSortFn(rowA.original, rowB.original, columnId);
+          
+          return 0;
+        },
+      },
     },
     useFilters,
-    useSortBy,
+    ...(sortable ? [useSortBy] : []),
     usePagination
   ) as TableInstanceWithHooks<DataItem>;
 
@@ -179,7 +200,12 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
   return (
     <div>
       <table {...getTableProps()} className="table-container">
-        <TableHeader headerGroups={headerGroups} />
+        <TableHeader 
+          headerGroups={headerGroups} 
+          sortable={sortable}
+          ascendingIcon={ascendingIcon}
+          descendingIcon={descendingIcon}
+        />
         <tbody {...getTableBodyProps()}>
           {page.map((row) => {
             prepareRow(row);

src/components/TableHeader.tsx

@@ -9,9 +9,15 @@ import '../styles/TableHeader.css';
  * Props for the TableHeader component
  * @interface TableHeaderProps
  * @property {HeaderGroup<DataItem>[]} headerGroups - Array of header groups from react-table
+ * @property {boolean} [sortable=false] - Whether the table is sortable
+ * @property {React.ReactNode} [ascendingIcon] - Custom icon for ascending sort
+ * @property {React.ReactNode} [descendingIcon] - Custom icon for descending sort
  */
 interface TableHeaderProps {
   headerGroups: HeaderGroup<DataItem>[];
+  sortable?: boolean;
+  ascendingIcon?: React.ReactNode;
+  descendingIcon?: React.ReactNode;
 }
 
 type ColumnWithSorting = {
@@ -22,6 +28,7 @@ type ColumnWithSorting = {
   isSortedDesc?: boolean;
   Filter?: React.ComponentType<{ column: ColumnWithSorting }>;
   id: string;
+  disableSortBy?: boolean;
 }
 
 /**
@@ -30,30 +37,43 @@ type ColumnWithSorting = {
  * @param {TableHeaderProps} props - Component props
  * @returns {JSX.Element} Rendered table header
  */
-export const TableHeader: React.FC<TableHeaderProps> = ({ headerGroups }) => (
+export const TableHeader: React.FC<TableHeaderProps> = ({ 
+  headerGroups, 
+  sortable = false,
+  ascendingIcon,
+  descendingIcon 
+}) => (
   <thead className="table-header">
     {headerGroups.map(headerGroup => {
       const { key: headerGroupKey, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
 
       return (
         <tr key={headerGroupKey} {...headerGroupProps}>
           {(headerGroup.headers as unknown as ColumnWithSorting[]).map((column) => {
-            const { key: columnKey, ...columnProps } = column.getHeaderProps(column.getSortByToggleProps());
-
+            const isColumnSortable = sortable && !column.disableSortBy;
+            const { key: columnKey, ...columnProps } = isColumnSortable 
+              ? column.getHeaderProps(column.getSortByToggleProps())
+              : column.getHeaderProps();
+              
             return (
               <th
                 key={columnKey}
                 {...columnProps}
+                className={isColumnSortable ? 'sortable' : ''}
               >
-                {column.render('Header')}
-                <span>
-                  {column.isSorted
-                    ? column.isSortedDesc
-                      ? ' 🔽 '
-                      : ' 🔼 '
-                    : ' '}
-                </span>
-                {column.Filter ? column.render('Filter') : null}
+                <div className='table-header-cell'>
+                  {column.render('Header')}
+                  {isColumnSortable && (
+                    <span>
+                      {column.isSorted
+                        ? column.isSortedDesc
+                          ? descendingIcon || ' 🔽 '
+                          : ascendingIcon || ' 🔼 '
+                        : ' '}
+                    </span>
+                  )}
+                  {column.Filter ? column.render('Filter') : null}
+                </div>
               </th>
             );
           })}

src/constants/sort.ts

@@ -0,0 +1,4 @@
+export enum SortType {
+    Custom = 'custom',
+    Basic = 'basic',
+}

src/styles/TableHeader.css

@@ -3,6 +3,16 @@
   border-bottom: 2px solid #e0e0e0;
   background-color: #2c3e50;
   color: #ffffff;
-  cursor: pointer;
   font-weight: 600;
-} 
+}
+
+.table-header th.sortable {
+  cursor: pointer;
+}
+
+.table-header-cell{
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+}

src/types/types.ts

@@ -7,6 +7,8 @@ export interface Column {
   title: string;
   render?: (value: unknown, record: DataItem) => React.ReactNode;
   filterable?: boolean;
+  sortable?: boolean;
+  customSortFn?: (rowA: DataItem, rowB: DataItem, columnId: string) => number;
 }
 
 export interface DataItem {