jattac.libs.web.responsive-table 0.2.3 → 0.2.4

package/README.md

@@ -1,4 +1,4 @@
-# ResponsiveTable: A Modern and Flexible React Table Component
+'''# ResponsiveTable: A Modern and Flexible React Table Component
 
 ResponsiveTable is a powerful, lightweight, and fully responsive React component for creating beautiful and functional tables. It’s designed to look great on any device, adapting from a traditional table layout on desktops to a clean, card-based view on mobile screens.
 
@@ -11,7 +11,7 @@ ResponsiveTable is a powerful, lightweight, and fully responsive React component
 - **Interactive Elements**: Easily add click handlers for rows, headers, and footer cells.
 - **Performant**: Built with performance in mind, including debounced resize handling.
 - **Easy to Use**: A simple and intuitive API for quick integration.
-- **Extensible Plugin System**: Easily add new functionalities like filtering, infinite scrolling, or custom behaviors.
+- **Extensible Plugin System**: Easily add new functionalities like filtering, sorting, or infinite scrolling.
 
 ## Installation
 
@@ -123,7 +123,7 @@ import ResponsiveTable from 'jattac.libs.web.responsive-table';
 
 const CustomCells = () => {
   const columns = [
-    { displayLabel: 'User', cellRenderer: (row) => <strong>{row.user}</strong> },
+    { displayLabel: <strong>User</strong>, cellRenderer: (row) => <strong>{row.user}</strong> },
     {
       displayLabel: 'Status',
       cellRenderer: (row) => (
@@ -284,8 +284,8 @@ Plugins are passed to the `ResponsiveTable` component via the `plugins` prop, wh
 
 ```jsx
 import React from 'react';
-import ResponsiveTable from 'jattac.libs.web.responsive-table';
-import { FilterPlugin } from 'jattac.libs.web.responsive-table/dist/Plugins/FilterPlugin'; // Adjust path as needed
+// Note: All plugins are exported from the main package entry point.
+import ResponsiveTable, { FilterPlugin } from 'jattac.libs.web.responsive-table';
 
 const MyTableWithPlugins = () => {
   const columns = [
@@ -314,6 +314,145 @@ const MyTableWithPlugins = () => {
 
 ### Built-in Plugins
 
+#### `SortPlugin`
+
+The `SortPlugin` provides powerful, type-safe, and highly customizable column sorting. It adds intuitive UI cues, allowing users to click column headers to sort the data in ascending, descending, or original order.
+
+**Enabling the `SortPlugin`:**
+
+To use the plugin, you must first import it and provide a generic instance of it to the `plugins` prop. The real power comes from making the plugin instance generic with your data type, which provides type-safety and IDE autocompletion for the sort comparer helpers.
+
+```jsx
+import React from 'react';
+import ResponsiveTable, { IResponsiveTableColumnDefinition, SortPlugin } from 'jattac.libs.web.responsive-table';
+
+// Define the shape of your data
+interface User {
+  id: number;
+  name: string;
+  signupDate: string;
+  logins: number;
+}
+
+// 1. Create a single, generic instance of the plugin.
+//    This is the ONLY setup step required.
+const sortPlugin = new SortPlugin<User>({
+  initialSortColumn: 'logins',
+  initialSortDirection: 'desc',
+});
+
+// 2. Define the columns, using the helpers directly from the plugin instance.
+const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
+  // ... see examples below
+];
+
+const UserTable = ({ users }) => (
+  <ResponsiveTable
+    columnDefinitions={columnDefinitions}
+    data={users}
+    // 3. Pass the already-configured plugin to the table.
+    plugins={[sortPlugin]}
+  />
+);
+```
+
+**How to Make Columns Sortable (Opt-In):**
+
+A column is made sortable by adding either a `sortComparer` or a `getSortableValue` property to its definition.
+
+*   `sortComparer`: A function that defines the exact comparison logic. This is the most powerful option and should be used for complex data types or custom logic.
+*   `getSortableValue`: A simpler function that just returns the primitive value (string, number, etc.) to be used in a default comparison.
+
+**Example 1: Using Type-Safe Comparer Helpers**
+
+The `SortPlugin` instance provides a `comparers` object with pre-built, type-safe helper functions to eliminate boilerplate for common sorting scenarios. This is the recommended approach.
+
+```jsx
+const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
+  {
+    displayLabel: 'Name',
+    dataKey: 'name',
+    cellRenderer: (user) => user.name,
+    // The plugin instance itself provides the type-safe helpers.
+    // The string 'name' is fully type-checked against the User interface.
+    sortComparer: sortPlugin.comparers.caseInsensitiveString('name'),
+  },
+  {
+    displayLabel: 'Signup Date',
+    dataKey: 'signupDate',
+    cellRenderer: (user) => new Date(user.signupDate).toLocaleDateString(),
+    // IDE autocompletion for 'signupDate' works perfectly.
+    sortComparer: sortPlugin.comparers.date('signupDate'),
+  },
+  {
+    displayLabel: 'Logins',
+    dataKey: 'logins',
+    cellRenderer: (user) => user.logins,
+    sortComparer: sortPlugin.comparers.numeric('logins'),
+  },
+  {
+    displayLabel: 'Actions',
+    // This column is NOT sortable because it has no sort-related properties.
+    cellRenderer: (user) => <button>View</button>,
+  },
+];
+```
+
+**Example 2: Writing a Custom `sortComparer`**
+
+For unique requirements, you can write your own comparison function from scratch.
+
+```jsx
+const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
+  {
+    displayLabel: 'Name',
+    dataKey: 'name',
+    cellRenderer: (user) => user.name,
+    // Writing custom logic for a case-sensitive sort
+    sortComparer: (a, b, direction) => {
+      const nameA = a.name; // No .toLowerCase()
+      const nameB = b.name;
+      if (nameA < nameB) return direction === 'asc' ? -1 : 1;
+      if (nameA > nameB) return direction === 'asc' ? 1 : -1;
+      return 0;
+    },
+  },
+];
+```
+
+**Example 3: Using `getSortableValue` for Simple Cases**
+
+If you don't need special logic, `getSortableValue` is a concise way to enable default sorting on a property.
+
+```jsx
+const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
+  {
+    displayLabel: 'Logins',
+    dataKey: 'logins',
+    cellRenderer: (user) => user.logins,
+    // This enables a simple, default numerical sort on the 'logins' property.
+    getSortableValue: (user) => user.logins,
+  },
+];
+```
+
+**Plugin Options (via `new SortPlugin(options)`):**
+
+| Prop                  | Type (`keyof TData`) | Description                                                                 |
+| --------------------- | -------------------- | --------------------------------------------------------------------------- |
+| `initialSortColumn`   | `string`             | The `dataKey` of the column to sort by initially.                           |
+| `initialSortDirection`| `'asc' \| 'desc'`    | The direction for the initial sort.                                         |
+
+**`SortPlugin.comparers` API:**
+
+The `comparers` object on your `SortPlugin` instance provides the following helper methods. Each method is a factory that takes a `dataKey` (which is type-checked against your data model) and returns a `sortComparer` function.
+
+| Method                  | Description                                                                 |
+| ----------------------- | --------------------------------------------------------------------------- |
+| `numeric(dataKey)`      | Performs a standard numerical sort.                                         |
+| `caseInsensitiveString(dataKey)` | Performs a case-insensitive alphabetical sort.                     |
+| `date(dataKey)`         | Correctly sorts dates, assuming the data is a valid date string or timestamp. |
+
 #### `FilterPlugin`
 
 Provides a search input to filter table data. It can be enabled by setting `filterProps.showFilter` to `true` on the `ResponsiveTable` component. For columns to be filterable, you must provide a `getFilterableValue` function in their `IResponsiveTableColumnDefinition`.
@@ -328,7 +467,7 @@ Provides a search input to filter table data. It can be enabled by setting `filt
 **Example with `FilterPlugin`:**
 
 ```jsx
-import React, { useState } from 'react';
+import React from 'react';
 import ResponsiveTable from 'jattac.libs.web.responsive-table';
 
 const FilterableTable = () => {
@@ -437,143 +576,6 @@ const InfiniteScrollTable = () => {
 };
 ```
 
-### Extending Functionality with Custom Plugins
-
-Developers can create their own custom plugins to add unique features to the `ResponsiveTable`. This is achieved by implementing the `IResponsiveTablePlugin` interface.
-
-**`IResponsiveTablePlugin<TData>` Interface:**
-
-| Property       | Type                                 | Description                                                                 |
-| -------------- | ------------------------------------ | --------------------------------------------------------------------------- |
-| `id`           | `string`                             | A unique identifier for the plugin.                                         |
-| `renderHeader?`| `() => ReactNode`                    | Optional. A function that returns a React component to be rendered above the table. |
-| `renderFooter?`| `() => ReactNode`                    | Optional. A function that returns a React component to be rendered below the table. |
-| `processData?` | `(data: TData[]) => TData[]`         | Optional. A function that processes the table data before it is rendered. Useful for sorting, filtering, or transforming data. |
-| `onPluginInit?`| `(api: IPluginAPI<TData>) => void`   | Optional. A callback function that provides the plugin with an API to interact with the `ResponsiveTable` component. |
-
-**`IPluginAPI<TData>` Interface:**
-
-This interface provides methods and properties for plugins to interact with the `ResponsiveTable` component.
-
-| Property             | Type                                 | Description                                                                 |
-| -------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
-| `getData`            | `() => TData[]`                      | Returns the current raw data array being used by the table.                 |
-| `forceUpdate`        | `() => void`                         | Forces the `ResponsiveTable` component to re-render. Useful after a plugin modifies internal state that affects rendering. |
-| `columnDefinitions`  | `ColumnDefinition<TData>[]`          | Provides access to the table's column definitions.                          |
-| `getScrollableElement?`| `() => HTMLElement | null`         | Optional. Returns the HTML element that is scrollable, if `maxHeight` is set. Useful for implementing scroll-based features. |
-| `infiniteScrollProps?`| `object`                            | Optional. Provides access to the `infiniteScrollProps` passed to the `ResponsiveTable`. |
-| `filterProps?`       | `object`                            | Optional. Provides access to the `filterProps` passed to the `ResponsiveTable`. |
-
-**Example: Custom Sorting Plugin**
-
-This example demonstrates a simple sorting plugin that allows sorting by a specified column.
-
-```typescript
-// src/Plugins/SortPlugin.ts
-import React from 'react';
-import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
-import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
-
-export class SortPlugin<TData> implements IResponsiveTablePlugin<TData> {
-  public id = 'sort';
-  private api!: IPluginAPI<TData>;
-  private sortColumn: string | null = null;
-  private sortDirection: 'asc' | 'desc' = 'asc';
-
-  public onPluginInit = (api: IPluginAPI<TData>) => {
-    this.api = api;
-  };
-
-  public renderHeader = () => {
-    return (
-      <div style={{ marginBottom: '1rem' }}>
-        Sort by:
-        <select onChange={this.handleColumnChange} style={{ marginLeft: '0.5rem' }}>
-          <option value="">None</option>
-          {this.api.columnDefinitions.map((colDef) => {
-            const rawColDef = colDef as IResponsiveTableColumnDefinition<TData>;
-            if (rawColDef.dataKey) {
-              return <option key={rawColDef.dataKey} value={rawColDef.dataKey}>{rawColDef.displayLabel}</option>;
-            }
-            return null;
-          })}
-        </select>
-        {this.sortColumn && (
-          <button onClick={this.toggleSortDirection} style={{ marginLeft: '0.5rem' }}>
-            {this.sortDirection === 'asc' ? 'Ascending' : 'Descending'}
-          </button>
-        )}
-      </div>
-    );
-  };
-
-  public processData = (data: TData[]): TData[] => {
-    if (!this.sortColumn) {
-      return data;
-    }
-
-    const sortedData = [...data].sort((a, b) => {
-      const aValue = a[this.sortColumn as keyof TData];
-      const bValue = b[this.sortColumn as keyof TData];
-
-      if (aValue < bValue) return this.sortDirection === 'asc' ? -1 : 1;
-      if (aValue > bValue) return this.sortDirection === 'asc' ? 1 : -1;
-      return 0;
-    });
-
-    return sortedData;
-  };
-
-  private handleColumnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.sortColumn = e.target.value || null;
-    this.api.forceUpdate();
-  };
-
-  private toggleSortDirection = () => {
-    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-    this.api.forceUpdate();
-  };
-}
-
-// Usage in your component:
-```jsx
-import React from 'react';
-import ResponsiveTable from 'jattac.libs.web.responsive-table';
-import { SortPlugin } from './SortPlugin'; // Assuming SortPlugin.ts is in the same directory
-
-const SortableTable = () => {
-  const data = [
-    { id: 1, name: 'Alice', age: 30 },
-    { id: 2, name: 'Bob', age: 25 },
-    { id: 3, name: 'Charlie', age: 35 },
-  ];
-
-  const columns = [
-    { displayLabel: 'ID', dataKey: 'id', cellRenderer: (row) => row.id },
-    { displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name },
-    { displayLabel: 'Age', dataKey: 'age', cellRenderer: (row) => row.age },
-  ];
-
-  return (
-    <ResponsiveTable
-      columnDefinitions={columns}
-      data={data}
-      plugins={[new SortPlugin()]}
-    />
-  );
-};
-```
-
-**Other Plugin Ideas (beyond Filtering and Infinite Scroll):**
-
--   **Column Resizing Plugin:** Allows users to drag column headers to resize columns.
--   **Row Selection Plugin:** Adds checkboxes to rows for multi-row selection.
--   **Export Data Plugin:** Provides buttons to export table data to CSV, Excel, or PDF.
--   **Drag-and-Drop Reordering Plugin:** Enables reordering of rows or columns via drag and drop.
--   **Column Visibility Toggle Plugin:** Allows users to show/hide specific columns.
-
----
-
 ---
 
 ## API Reference
@@ -595,15 +597,17 @@ const SortableTable = () => {
 | `filterProps`                 | `object`                             | No       | Configuration for the built-in filter plugin.                                                               |
 | `animationProps`              | `object`                             | No       | Configuration for animations, including `isLoading` and `animateOnLoad`.                                    |
 
-### `IResponsiveTableColumnDefinition`
+### `IResponsiveTableColumnDefinition<TData>`
 
 | Property        | Type                        | Required | Description                                                                    |
 | --------------- | --------------------------- | -------- | ------------------------------------------------------------------------------ |
-| `displayLabel`  | `string`                    | Yes      | The label displayed in the table header.                                       |
+| `displayLabel`  | `ReactNode`                 | Yes      | The label displayed in the table header (can be a string or any React component). |
 | `cellRenderer`  | `(row: TData) => ReactNode` | Yes      | A function that returns the content to be rendered in the cell.                |
-| `dataKey`       | `string`                    | No       | A key to match the column to a property in the data object (optional).         |
+| `dataKey`       | `string`                    | No       | A key to match the column to a property in the data object (required for sorting). |
 | `interactivity` | `object`                    | No       | An object to define header interactivity (`onHeaderClick`, `id`, `className`). |
-| `getFilterableValue`| `(row: TData) => string`  | No       | A function that returns the string value to be used for filtering this column. Required for `FilterPlugin`. |
+| `getFilterableValue`| `(row: TData) => string \| number` | No       | A function that returns the string or number value to be used for filtering this column. |
+| `getSortableValue`| `(row: TData) => any`       | No       | A function that returns a primitive value from a row to be used for default sorting. |
+| `sortComparer`  | `(a: TData, b: TData, direction: 'asc' \| 'desc') => number` | No | A function that provides the precise comparison logic for sorting a column. |
 
 ### `IFooterRowDefinition`
 
@@ -624,3 +628,4 @@ const SortableTable = () => {
 ## License
 
 This project is licensed under the MIT License.
+''

package/dist/Data/IResponsiveTableColumnDefinition.d.ts

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
+export type SortDirection = 'asc' | 'desc';
 export default interface IResponsiveTableColumnDefinition<TData> {
     displayLabel: ReactNode;
     cellRenderer: (data: TData) => ReactNode;
+    dataKey?: string;
     interactivity?: {
         id: string;
         onHeaderClick?: (id: string) => void;
         className?: string;
     };
     getFilterableValue?: (data: TData) => string | number;
+    getSortableValue?: (row: TData) => any;
+    sortComparer?: (a: TData, b: TData, direction: SortDirection) => number;
 }

package/dist/Plugins/SortPlugin.d.ts

@@ -0,0 +1,29 @@
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+import IResponsiveTableColumnDefinition, { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
+export interface ISortPluginOptions<TData> {
+    initialSortColumn?: keyof TData;
+    initialSortDirection?: SortDirection;
+}
+export declare class SortPlugin<TData> implements IResponsiveTablePlugin<TData> {
+    id: string;
+    private api;
+    private sortColumn;
+    private sortDirection;
+    readonly comparers: {
+        numeric: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => number;
+        caseInsensitiveString: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => 0 | 1 | -1;
+        date: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => number;
+    };
+    constructor(options?: ISortPluginOptions<TData>);
+    onPluginInit: (api: IPluginAPI<TData>) => void;
+    processData: (data: TData[]) => TData[];
+    getHeaderProps: (columnDef: IResponsiveTableColumnDefinition<TData>) => {
+        onClick?: undefined;
+        className?: undefined;
+        'aria-sort'?: undefined;
+    } | {
+        onClick: () => void;
+        className: string;
+        'aria-sort': string;
+    };
+}

package/dist/UI/ResponsiveTable.d.ts

@@ -57,6 +57,7 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TDa
     private getRawColumnDefinition;
     private onHeaderClickCallback;
     private getClickableHeaderClassName;
+    private getHeaderProps;
     private get rowClickFunction();
     private get rowClickStyle();
     private get tableFooter();

package/dist/index.d.ts

@@ -5,5 +5,6 @@ import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
 import { FilterPlugin } from './Plugins/FilterPlugin';
 import { InfiniteScrollPlugin } from './Plugins/InfiniteScrollPlugin';
 import { IResponsiveTablePlugin } from './Plugins/IResponsiveTablePlugin';
-export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin };
+import { SortPlugin } from './Plugins/SortPlugin';
+export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin };
 export default ResponsiveTable;

package/dist/index.js

@@ -31,8 +31,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  --table-border-color: #e0e0e0;\r\n  --table-header-bg: #f8f9fa;\r\n  --table-row-hover-bg: #e9ecef;\r\n  --table-row-stripe-bg: #f2f2f2;\r\n  --card-bg: #ffffff;\r\n  --card-border-color: #e0e0e0;\r\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n  --text-color: #212529;\r\n  --text-color-muted: #6c757d;\r\n  --interactive-color: #0056b3;\r\n}\r\n\r\n/* Mobile Card View */\r\n.ResponsiveTable-module_card__b-U2v {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: var(--card-shadow);\r\n  transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_card__b-U2v:hover {\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* This is not used in the component, but keeping it styled in case it's added back */\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: var(--table-header-bg);\r\n  padding: 0.75rem 1rem;\r\n  font-weight: 600; /* Bolder */\r\n  border-bottom: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ResponsiveTable-module_card-label__v9L71 {\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n/* Desktop Table View */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  color: var(--text-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: var(--table-header-bg);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  padding: 1rem;\r\n  border-bottom: 2px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 1rem;\r\n  border-bottom: 1px solid var(--table-border-color);\r\n  text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n  background-color: var(--card-bg);\r\n  transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n  background-color: var(--table-header-bg);\r\n  border-top: 2px solid var(--table-border-color);\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n  padding: 1rem;\r\n  text-align: right;\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n  background-color: var(--table-header-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  border-top: 2px solid var(--table-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n  background-color: #e0e0e0;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -150%;\r\n  width: 150%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n  height: 1.2em;\r\n  width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: var(--text-color-muted); /* Softer color */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n  padding: 40px;\r\n  background-color: var(--table-header-bg);\r\n  border: 1px dashed var(--table-border-color);\r\n  border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: 500; /* Less aggressive than bold */\r\n  font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n  opacity: 0;\r\n  transform: scaleY(0);\r\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n  0% {\r\n    background-color: var(--table-row-hover-bg);\r\n  }\r\n  100% {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n";
-var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-body":"ResponsiveTable-module_footer-card-body__CtBMv","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","skeleton":"ResponsiveTable-module_skeleton__XxsXW","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-"};
+var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  --table-border-color: #e0e0e0;\r\n  --table-header-bg: #f8f9fa;\r\n  --table-row-hover-bg: #e9ecef;\r\n  --table-row-stripe-bg: #f2f2f2;\r\n  --card-bg: #ffffff;\r\n  --card-border-color: #e0e0e0;\r\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n  --text-color: #212529;\r\n  --text-color-muted: #6c757d;\r\n  --interactive-color: #0056b3;\r\n}\r\n\r\n/* Mobile Card View */\r\n.ResponsiveTable-module_card__b-U2v {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: var(--card-shadow);\r\n  transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_card__b-U2v:hover {\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* This is not used in the component, but keeping it styled in case it's added back */\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: var(--table-header-bg);\r\n  padding: 0.75rem 1rem;\r\n  font-weight: 600; /* Bolder */\r\n  border-bottom: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ResponsiveTable-module_card-label__v9L71 {\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n/* Desktop Table View */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  color: var(--text-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: var(--table-header-bg);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  padding: 1rem;\r\n  border-bottom: 2px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 1rem;\r\n  border-bottom: 1px solid var(--table-border-color);\r\n  text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n  background-color: var(--card-bg);\r\n  transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n/* Sortable Header Styles */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 {\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding-right: 2rem; /* Space for the icon */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 0.4;\r\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1;\r\n}\r\n\r\n/* Default unsorted icon (up and down arrows) */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::before,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  content: '';\r\n  position: absolute;\r\n  display: block;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 0.4em solid transparent;\r\n  border-right: 0.4em solid transparent;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  border-bottom: 0.4em solid var(--text-color);\r\n  top: 0.1em;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  border-top: 0.4em solid var(--text-color);\r\n  bottom: 0.1em;\r\n}\r\n\r\n/* Sorted Ascending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  border-bottom-color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  opacity: 0.4;\r\n}\r\n\r\n/* Sorted Descending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  border-top-color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  opacity: 0.4;\r\n}\r\n\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n  background-color: var(--table-header-bg);\r\n  border-top: 2px solid var(--table-border-color);\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n  padding: 1rem;\r\n  text-align: right;\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n  background-color: var(--table-header-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  border-top: 2px solid var(--table-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n  background-color: #e0e0e0;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -150%;\r\n  width: 150%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n  height: 1.2em;\r\n  width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: var(--text-color-muted); /* Softer color */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n  padding: 40px;\r\n  background-color: var(--table-header-bg);\r\n  border: 1px dashed var(--table-border-color);\r\n  border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: 500; /* Less aggressive than bold */\r\n  font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n  opacity: 0;\r\n  transform: scaleY(0);\r\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n  0% {\r\n    background-color: var(--table-row-hover-bg);\r\n  }\r\n  100% {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n";
+var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-body":"ResponsiveTable-module_footer-card-body__CtBMv","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","skeleton":"ResponsiveTable-module_skeleton__XxsXW","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-"};
 styleInject(css_248z);
 
 class FilterPlugin {
@@ -1126,6 +1126,17 @@ class ResponsiveTable extends React.Component {
             : '';
         return clickableHeaderClassName;
     }
+    getHeaderProps(columnDefinition) {
+        let headerProps = {};
+        if (this.props.plugins) {
+            this.props.plugins.forEach((plugin) => {
+                if (plugin.getHeaderProps) {
+                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(columnDefinition)));
+                }
+            });
+        }
+        return headerProps;
+    }
     get rowClickFunction() {
         if (this.props.onRowClick) {
             return this.props.onRowClick;
@@ -1225,9 +1236,10 @@ class ResponsiveTable extends React.Component {
                     React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
                         const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
                         const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
-                        return (React.createElement("th", { key: colIndex, className: `${clickableHeaderClassName}`, onClick: onHeaderClickCallback
-                                ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity.id)
-                                : undefined }, this.getColumnDefinition(columnDefinition, 0).displayLabel));
+                        const headerProps = this.getHeaderProps(columnDefinition);
+                        return (React.createElement("th", Object.assign({ key: colIndex, className: `${clickableHeaderClassName}` }, headerProps),
+                            this.getColumnDefinition(columnDefinition, 0).displayLabel,
+                            React.createElement("span", { className: styles.sortIcon })));
                     }))),
                 React.createElement("tbody", null, ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) ? (React.createElement(FixedSizeList, { height: fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500, itemCount: this.data.length, itemSize: 50, width: '100%', outerRef: this.tableContainerRef }, Row)) : (this.data.map((row, rowIndex) => {
                     var _a;
@@ -1243,6 +1255,10 @@ class ResponsiveTable extends React.Component {
         }
         return this.props.plugins.map((plugin) => {
             if (plugin.renderHeader) {
+                // For sort plugin, only render header in mobile view
+                if (plugin.id === 'sort' && !this.state.isMobile) {
+                    return null;
+                }
                 return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
             }
             return null;
@@ -1272,7 +1288,104 @@ class ResponsiveTable extends React.Component {
     }
 }
 
+// Type-safe sort comparer helpers
+const createSortComparers = () => ({
+    numeric: (key) => (a, b, direction) => {
+        const valA = a[key];
+        const valB = b[key];
+        return direction === 'asc' ? valA - valB : valB - valA;
+    },
+    caseInsensitiveString: (key) => (a, b, direction) => {
+        const valA = a[key].toLowerCase();
+        const valB = b[key].toLowerCase();
+        if (valA < valB)
+            return direction === 'asc' ? -1 : 1;
+        if (valA > valB)
+            return direction === 'asc' ? 1 : -1;
+        return 0;
+    },
+    date: (key) => (a, b, direction) => {
+        const dateA = new Date(a[key]).getTime();
+        const dateB = new Date(b[key]).getTime();
+        return direction === 'asc' ? dateA - dateB : dateB - dateA;
+    },
+});
+class SortPlugin {
+    constructor(options) {
+        var _a, _b;
+        this.id = 'sort';
+        this.comparers = createSortComparers();
+        this.onPluginInit = (api) => {
+            this.api = api;
+        };
+        this.processData = (data) => {
+            if (!this.sortColumn || !this.sortDirection) {
+                return data;
+            }
+            const columnDef = this.api.columnDefinitions.find((col) => col.dataKey === this.sortColumn);
+            if (!columnDef) {
+                return data;
+            }
+            const sortedData = [...data].sort((a, b) => {
+                if (columnDef.sortComparer) {
+                    return columnDef.sortComparer(a, b, this.sortDirection);
+                }
+                let aValue, bValue;
+                if (columnDef.getSortableValue) {
+                    aValue = columnDef.getSortableValue(a);
+                    bValue = columnDef.getSortableValue(b);
+                }
+                else {
+                    aValue = a[this.sortColumn];
+                    bValue = b[this.sortColumn];
+                }
+                if (aValue < bValue)
+                    return this.sortDirection === 'asc' ? -1 : 1;
+                if (aValue > bValue)
+                    return this.sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+            return sortedData;
+        };
+        this.getHeaderProps = (columnDef) => {
+            const { dataKey, sortComparer, getSortableValue } = columnDef;
+            const isSortable = !!(sortComparer || getSortableValue);
+            if (!isSortable || !dataKey) {
+                return {};
+            }
+            const onHeaderClick = () => {
+                if (this.sortColumn === dataKey) {
+                    if (this.sortDirection === 'desc') {
+                        this.sortColumn = null;
+                        this.sortDirection = null;
+                    }
+                    else {
+                        this.sortDirection = 'desc';
+                    }
+                }
+                else {
+                    this.sortColumn = dataKey;
+                    this.sortDirection = 'asc';
+                }
+                this.api.forceUpdate();
+            };
+            let sortClassName = 'sortable';
+            if (this.sortColumn === dataKey) {
+                sortClassName = `sorted-${this.sortDirection}`;
+            }
+            return {
+                onClick: onHeaderClick,
+                className: sortClassName,
+                'aria-sort': this.sortColumn === dataKey ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none',
+            };
+        };
+        this.sortColumn = (_a = options === null || options === void 0 ? void 0 : options.initialSortColumn) !== null && _a !== void 0 ? _a : null;
+        this.sortDirection = (_b = options === null || options === void 0 ? void 0 : options.initialSortDirection) !== null && _b !== void 0 ? _b : null;
+    }
+}
+
 exports.FilterPlugin = FilterPlugin;
 exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
+exports.SortPlugin = SortPlugin;
 exports.default = ResponsiveTable;
 //# sourceMappingURL=index.js.map