feat: disableSort

docs/stories/Intro.stories.tsx

@@ -1,39 +1,7 @@
 import { ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { DateFilter, SelectFilter, Table, TableProps, TextFilter } from '../../src';
-import data, { Person } from './_data';
-
-const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' });
-
-const defaultColumns: TableProps<Person>['columns'] = (col) => [
-  //
-  col((x) => x.avatar, {
-    header: 'Avatar',
-    renderCell: (avatar) => <img width={50} height={50} src={avatar} />,
-    width: 'max-content',
-  }),
-
-  col((x) => x.first_name, {
-    header: 'First Name',
-    filter: <TextFilter />,
-  }),
-
-  col((x) => x.last_name, {
-    header: 'Last Name',
-    filter: <TextFilter />,
-  }),
-
-  col((x) => x.job_title, {
-    header: 'Job Title',
-    filter: <SelectFilter />,
-  }),
-
-  col((x) => x.birthday, {
-    header: 'Birthday',
-    renderCell: (birthday) => dateFormat.format(new Date(birthday)),
-    filter: <DateFilter />,
-  }),
-];
+import { Table } from '../../src';
+import data from './_data';
+import { defaultColumns } from './_default';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -69,3 +37,18 @@ export default {
 } as ComponentMeta<typeof Table>;
 
 export const Primary = {};
+
+export const SortDisabledAll = {
+  args: {
+    disableSort: true,
+  },
+};
+
+export const SortDisabledOne = {
+  args: {
+    columns: defaultColumns.map((col, i) => ({
+      ...col,
+      disableSort: i === 0,
+    })),
+  },
+};

docs/stories/_default.tsx

@@ -0,0 +1,36 @@
+import { DateFilter, SelectFilter, TableProps, TextFilter } from '../../src';
+import { Person } from './_data';
+
+const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' });
+
+const _defaultColumns: TableProps<Person>['columns'] = (col) => [
+  //
+  col((x) => x.avatar, {
+    header: 'Avatar',
+    renderCell: (avatar) => <img width={50} height={50} src={avatar} />,
+    width: 'max-content',
+  }),
+
+  col((x) => x.first_name, {
+    header: 'First Name',
+    filter: <TextFilter />,
+  }),
+
+  col((x) => x.last_name, {
+    header: 'Last Name',
+    filter: <TextFilter />,
+  }),
+
+  col((x) => x.job_title, {
+    header: 'Job Title',
+    filter: <SelectFilter />,
+  }),
+
+  col((x) => x.birthday, {
+    header: 'Birthday',
+    renderCell: (birthday) => dateFormat.format(new Date(birthday)),
+    filter: <DateFilter />,
+  }),
+];
+
+export const defaultColumns = _defaultColumns((value, column) => ({ value, ...column }));

src/components/sortComponent.tsx

@@ -8,15 +8,24 @@ export function SortComponent<T>({ children }: { children: ReactNode }): JSX.Ele
   const Badge = useTheme((t) => t.components.Badge);
   const ArrowUpward = useTheme((t) => t.icons.ArrowUpward);
 
-  const { direction, index } = table.useState((state) => {
+  const { direction, index, sortDisabled } = table.useState((state) => {
     const index = state.sort.findIndex((s) => s.columnId === columnId) ?? -1;
+    const column = state.activeColumns.find((column) => column.id === columnId);
+
+    console.log(column, state);
+
     return {
       direction: state.sort[index]?.direction,
       index: index >= 0 && state.sort.length > 1 ? index + 1 : undefined,
+      sortDisabled: column?.disableSort ?? state.props.disableSort,
     };
   });
 
   function toggle(e: React.MouseEvent, off?: boolean) {
+    if (sortDisabled) {
+      return;
+    }
+
     const {
       props: { sort: controlledSort, onSortChange },
     } = table.getState();
@@ -61,17 +70,19 @@ export function SortComponent<T>({ children }: { children: ReactNode }): JSX.Ele
     >
       <div>{children}</div>
 
-      <Badge badgeContent={index}>
-        <span
-          css={[
-            { transition: 'all 300ms', fontSize: '0.8em' },
-            !direction && { opacity: 0 },
-            direction === 'desc' && { transform: 'rotate3d(0, 0, 1, 180deg)' },
-          ]}
-        >
-          <ArrowUpward />
-        </span>
-      </Badge>
+      {
+        <Badge badgeContent={sortDisabled ? 0 : index}>
+          <span
+            css={[
+              { transition: 'all 300ms', fontSize: '0.8em' },
+              !direction && { opacity: 0 },
+              direction === 'desc' && { transform: 'rotate3d(0, 0, 1, 180deg)' },
+            ]}
+          >
+            <ArrowUpward />
+          </span>
+        </Badge>
+      }
     </div>
   );
 }

src/internalState/calcProps.ts

@@ -42,6 +42,7 @@ export function calcProps<T>(props: TableProps<T>): InternalTableProps<T> {
         renderCell = defCol?.renderCell ?? asString,
         exportCell = defCol?.exportCell ?? asString,
         sortBy = defCol?.sortBy ?? [(v) => (typeof v === 'number' || v instanceof Date ? v : String(v))],
+        disableSort,
         cannotHide = defCol?.cannotHide,
         classes = defCol?.classes,
         filter = defCol?.filter,
@@ -60,6 +61,7 @@ export function calcProps<T>(props: TableProps<T>): InternalTableProps<T> {
         renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell),
         exportCell,
         sortBy: sortBy.map((fn, i) => cache(`columns.${cacheKey}.sortBy.${i}`, fn)),
+        disableSort,
         cannotHide,
         classes,
         filter,

src/types.ts

@@ -139,6 +139,8 @@ export interface TableProps<T> extends PartialTableTheme<T> {
   onSortChange?: (sort: Sort[]) => void;
   /** Handle sorting externally, e.g. server side */
   externalSort?: boolean;
+  /** Disable sort for all columns (can be override per column) */
+  disableSort?: boolean;
 
   //////////////////////////////////////////////////
   // Selection
@@ -277,6 +279,8 @@ export type Column<T, V> = {
   exportCell?: (value: V, item: T) => string | number;
   /** Customize sort criteria. By default it will be the value itself in case it's a number or Date, or a string representation of the value otherwise. */
   sortBy?: FunctionWithDeps<(value: V, item: T) => unknown>[];
+  /** Disable sort for this column */
+  disableSort?: boolean;
   /** Set filter component that will be displayed in the column header */
   filter?: ReactNode;
   /** Prevent hiding the column. */