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

package/README.md

@@ -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
 
@@ -82,7 +82,9 @@ const AnimatedTable = () => {
     }, 2000);
   }, []);
 
-  return <ResponsiveTable columnDefinitions={columns} data={data} animationProps={{ isLoading, animateOnLoad: true }} />;
+  return (
+    <ResponsiveTable columnDefinitions={columns} data={data} animationProps={{ isLoading, animateOnLoad: true }} />
+  );
 };
 ```
 
@@ -123,7 +125,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) => (
@@ -258,9 +260,7 @@ const NonStickyHeaderTable = () => {
 
   return (
     <div>
-      <h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>
-        Scroll down to see the table
-      </h1>
+      <h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>Scroll down to see the table</h1>
       <ResponsiveTable
         columnDefinitions={columns}
         data={data}
@@ -284,13 +284,18 @@ 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 = [
     { displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
-    { displayLabel: 'Age', dataKey: 'age', cellRenderer: (row) => row.age, getFilterableValue: (row) => row.age.toString() },
+    {
+      displayLabel: 'Age',
+      dataKey: 'age',
+      cellRenderer: (row) => row.age,
+      getFilterableValue: (row) => row.age.toString(),
+    },
   ];
 
   const data = [
@@ -304,7 +309,7 @@ const MyTableWithPlugins = () => {
       columnDefinitions={columns}
       data={data}
       // Enable built-in filter plugin via props
-      filterProps={{ showFilter: true, filterPlaceholder: "Search by name or age..." }}
+      filterProps={{ showFilter: true, filterPlaceholder: 'Search by name or age...' }}
       // Or provide a custom instance of the plugin
       // plugins={[new FilterPlugin()]}
     />
@@ -314,21 +319,160 @@ 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`.
 
 **Props for `FilterPlugin` (via `filterProps` on `ResponsiveTable`):**
 
-| Prop              | Type     | Description                                                                 |
-| ----------------- | -------- | --------------------------------------------------------------------------- |
-| `showFilter`      | `boolean`| If `true`, displays a filter input field above the table.                   |
-| `filterPlaceholder`| `string` | Placeholder text for the filter input. Defaults to "Search...".           |
+| Prop                | Type      | Description                                                     |
+| ------------------- | --------- | --------------------------------------------------------------- |
+| `showFilter`        | `boolean` | If `true`, displays a filter input field above the table.       |
+| `filterPlaceholder` | `string`  | Placeholder text for the filter input. Defaults to "Search...". |
 
 **Example with `FilterPlugin`:**
 
 ```jsx
-import React, { useState } from 'react';
+import React from 'react';
 import ResponsiveTable from 'jattac.libs.web.responsive-table';
 
 const FilterableTable = () => {
@@ -349,7 +493,7 @@ const FilterableTable = () => {
     <ResponsiveTable
       columnDefinitions={columns}
       data={initialData}
-      filterProps={{ showFilter: true, filterPlaceholder: "Filter users..." }}
+      filterProps={{ showFilter: true, filterPlaceholder: 'Filter users...' }}
     />
   );
 };
@@ -361,13 +505,13 @@ Enables infinite scrolling for the table, loading more data as the user scrolls
 
 **Props for `InfiniteScrollPlugin` (via `infiniteScrollProps` on `ResponsiveTable`):**
 
-| Prop                  | Type                                 | Description                                                                 |
-| --------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
-| `enableInfiniteScroll`| `boolean`                            | If `true`, enables infinite scrolling.                                      |
-| `onLoadMore`          | `(currentData: TData[]) => Promise<TData[] | null>` | Callback function to load more data. Should return a Promise resolving to new data or `null`. |
-| `hasMore`             | `boolean`                            | Indicates if there is more data to load.                                    |
-| `loadingMoreComponent`| `ReactNode`                          | Custom component to display while loading more data. Defaults to "Loading more...". |
-| `noMoreDataComponent` | `ReactNode`                          | Custom component to display when no more data is available. Defaults to "No more data.". |
+| Prop                   | Type                                       | Description                                                                              |
+| ---------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `enableInfiniteScroll` | `boolean`                                  | If `true`, enables infinite scrolling.                                                   |
+| `onLoadMore`           | `(currentData: TData[]) => Promise<TData[] | null>`                                                                                   | Callback function to load more data. Should return a Promise resolving to new data or `null`. |
+| `hasMore`              | `boolean`                                  | Indicates if there is more data to load.                                                 |
+| `loadingMoreComponent` | `ReactNode`                                | Custom component to display while loading more data. Defaults to "Loading more...".      |
+| `noMoreDataComponent`  | `ReactNode`                                | Custom component to display when no more data is available. Defaults to "No more data.". |
 
 **Example with `InfiniteScrollPlugin`:**
 
@@ -394,7 +538,7 @@ const InfiniteScrollTable = () => {
   };
 
   useEffect(() => {
-    fetchData(0).then(initialData => {
+    fetchData(0).then((initialData) => {
       setData(initialData);
       setPage(1);
     });
@@ -419,7 +563,9 @@ const InfiniteScrollTable = () => {
   ];
 
   return (
-    <div style={{ height: '300px' }}> {/* Container for scrollable table */}
+    <div style={{ height: '300px' }}>
+      {' '}
+      {/* Container for scrollable table */}
       <ResponsiveTable
         columnDefinitions={columns}
         data={data}
@@ -437,173 +583,38 @@ 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
 
 ### `ResponsiveTable` Props
 
-| Prop                          | Type                                 | Required | Description                                                                                                 |
-| ----------------------------- | ------------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `columnDefinitions`           | `IResponsiveTableColumnDefinition[]` | Yes      | An array of objects defining the table columns.                                                             |
-| `data`                        | `TData[]`                            | Yes      | An array of data objects to populate the table rows.                                                        |
-| `footerRows`                  | `IFooterRowDefinition[]`             | No       | An array of objects defining the table footer.                                                              |
-| `onRowClick`                  | `(item: TData) => void`              | No       | A callback function that is triggered when a row is clicked.                                                |
-| `noDataComponent`             | `ReactNode`                          | No       | A custom component to display when there is no data.                                                        |
-| `maxHeight`                   | `string`                             | No       | Sets a maximum height for the table body, making it scrollable.                                             |
-| `mobileBreakpoint`            | `number`                             | No       | The pixel width at which the table switches to the mobile view. Defaults to `600`.                          |
-| `enablePageLevelStickyHeader` | `boolean`                            | No       | If `false`, disables the header from sticking to the top of the page on scroll. Defaults to `true`.        |
-| `plugins`                     | `IResponsiveTablePlugin<TData>[]`    | No       | An array of plugin instances to extend table functionality.                                                 |
-| `infiniteScrollProps`         | `object`                             | No       | Configuration for the built-in infinite scroll plugin.                                                      |
-| `filterProps`                 | `object`                             | No       | Configuration for the built-in filter plugin.                                                               |
-| `animationProps`              | `object`                             | No       | Configuration for animations, including `isLoading` and `animateOnLoad`.                                    |
-
-### `IResponsiveTableColumnDefinition`
-
-| Property        | Type                        | Required | Description                                                                    |
-| --------------- | --------------------------- | -------- | ------------------------------------------------------------------------------ |
-| `displayLabel`  | `string`                    | Yes      | The label displayed in the table header.                                       |
-| `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).         |
-| `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`. |
+| Prop                          | Type                                 | Required | Description                                                                                         |
+| ----------------------------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
+| `columnDefinitions`           | `IResponsiveTableColumnDefinition[]` | Yes      | An array of objects defining the table columns.                                                     |
+| `data`                        | `TData[]`                            | Yes      | An array of data objects to populate the table rows.                                                |
+| `footerRows`                  | `IFooterRowDefinition[]`             | No       | An array of objects defining the table footer.                                                      |
+| `onRowClick`                  | `(item: TData) => void`              | No       | A callback function that is triggered when a row is clicked.                                        |
+| `noDataComponent`             | `ReactNode`                          | No       | A custom component to display when there is no data.                                                |
+| `maxHeight`                   | `string`                             | No       | Sets a maximum height for the table body, making it scrollable.                                     |
+| `mobileBreakpoint`            | `number`                             | No       | The pixel width at which the table switches to the mobile view. Defaults to `600`.                  |
+| `enablePageLevelStickyHeader` | `boolean`                            | No       | If `false`, disables the header from sticking to the top of the page on scroll. Defaults to `true`. |
+| `plugins`                     | `IResponsiveTablePlugin<TData>[]`    | No       | An array of plugin instances to extend table functionality.                                         |
+| `infiniteScrollProps`         | `object`                             | No       | Configuration for the built-in infinite scroll plugin.                                              |
+| `filterProps`                 | `object`                             | No       | Configuration for the built-in filter plugin.                                                       |
+| `animationProps`              | `object`                             | No       | Configuration for animations, including `isLoading` and `animateOnLoad`.                            |
+
+### `IResponsiveTableColumnDefinition<TData>`
+
+| Property             | Type                                                         | Required | Description                                                                              |
+| -------------------- | ------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------- |
+| `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 (required for sorting).       |
+| `interactivity`      | `object`                                                     | No       | An object to define header interactivity (`onHeaderClick`, `id`, `className`).           |
+| `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`
 
@@ -613,13 +624,13 @@ const SortableTable = () => {
 
 ### `IFooterColumnDefinition`
 
-| Property       | Type              | Required | Description                                                                    |
-| -------------- | ----------------- | -------- | ------------------------------------------------------------------------------ |
-| `colSpan`      | `number`          | Yes      | The number of columns the footer cell should span.                               |
-| `cellRenderer` | `() => ReactNode` | Yes      | A function that returns the content for the footer cell.                         |
+| Property       | Type              | Required | Description                                                                                                                                                                                                                                      |
+| -------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `colSpan`      | `number`          | Yes      | The number of columns the footer cell should span.                                                                                                                                                                                               |
+| `cellRenderer` | `() => ReactNode` | Yes      | A function that returns the content for the footer cell.                                                                                                                                                                                         |
 | `displayLabel` | `ReactNode`       | No       | An optional, explicit label for the footer cell. In mobile view, if `colSpan` is 1 and this is not provided, the corresponding column header will be used as a fallback. This is required for `colSpan` > 1 if you want a label to be displayed. |
-| `onCellClick`  | `() => void`      | No       | An optional click handler for the footer cell.                                 |
-| `className`    | `string`          | No       | Optional class name for custom styling of the footer cell.                     |
+| `onCellClick`  | `() => void`      | No       | An optional click handler for the footer cell.                                                                                                                                                                                                   |
+| `className`    | `string`          | No       | Optional class name for custom styling of the footer cell.                                                                                                                                                                                       |
 
 ## 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;