@dxos/react-ui-table 0.5.1-next.2ad6c47 → 0.5.1-next.5a770e3

package/src/components/Table/Table.stories.tsx

@@ -120,7 +120,7 @@ const MinimalTable = (props: any) => {
   return (
     <Table.Root>
       <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-        <Table.Table<any> {...props} />
+        <Table.Main<any> {...props} />
       </Table.Viewport>
     </Table.Root>
   );
@@ -216,7 +216,7 @@ export const Dynamic = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}
@@ -247,7 +247,7 @@ export const Editable = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}
@@ -278,7 +278,7 @@ export const PinnedLastRow = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}
@@ -332,7 +332,7 @@ export const InsertDelete = {
         </div>
         <Table.Root>
           <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-            <Table.Table<Item>
+            <Table.Main<Item>
               role='grid'
               rowsSelectable='multi'
               keyAccessor={(row) => row.publicKey.toHex()}
@@ -362,7 +362,7 @@ export const Resizable = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}
             columns={makeColumns(onUpdate)}
@@ -390,7 +390,7 @@ export const TenThousandRows = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}
@@ -492,7 +492,7 @@ export const RealTimeUpdates = {
     return (
       <Table.Root>
         <Table.Viewport classNames='fixed inset-0 overflow-auto'>
-          <Table.Table<Item>
+          <Table.Main<Item>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => row.publicKey.toHex()}

package/src/components/Table/Table.tsx

@@ -24,7 +24,7 @@ import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { TableRootContext, useTableRootContext } from './TableRootContext';
 import { type TableProps } from './props';
-import { useColumnResizing, usePinLastRow, useRowSelection } from '../../hooks';
+import { useColumnResizing, useColumnSorting, usePinLastRow, useRowSelection } from '../../hooks';
 import { groupTh, tableRoot } from '../../theme';
 
 type TableRootProps = { children: React.ReactNode };
@@ -87,6 +87,8 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
   const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
   useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
 
+  const columnSorting = useColumnSorting();
+
   const table = useReactTable({
     // Data
     meta: {},
@@ -104,6 +106,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
       columnVisibility,
       columnSizing,
       columnSizingInfo,
+      sorting: columnSorting.sorting,
       rowSelection,
       grouping,
     },
@@ -146,7 +149,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
 
   return (
     <TableProvider
-      {...props}
+      {...{ ...props, ...columnSorting }}
       table={table}
       header={header}
       expand={expand}
@@ -280,6 +283,6 @@ const GroupedTableContent = () => {
 
 export const Table = {
   Root: TableRoot,
-  Table: TablePrimitive,
   Viewport: TableViewport,
+  Main: TablePrimitive,
 };

package/src/components/Table/props.ts

@@ -6,6 +6,7 @@ import { type RowData, type RowSelectionState, type Table, type VisibilityState
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
+import { type ColumnSorting } from '../../hooks';
 import { type KeyValue, type TableColumnDef } from '../../types';
 
 export type TableFlags = Partial<{
@@ -37,6 +38,7 @@ export type TableProps<TData extends RowData> = TableFlags &
     data: TData[];
     columns: TableColumnDef<TData>[];
     onColumnResize: (state: Record<string, number>) => void;
+    onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
     columnVisibility: VisibilityState;
     // Controllable row selection
     rowSelection: RowSelectionState;
@@ -56,4 +58,4 @@ export type TableContextValue<TData> = TableFlags &
   Pick<TableProps<TData>, 'keyAccessor'> & {
     table: Table<TData>;
     isGrid: boolean;
-  };
+  } & ColumnSorting;

package/src/hooks/useColumnSorting.ts

@@ -2,52 +2,62 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type SortDirection, type Column } from '@tanstack/react-table';
+import { type SortDirection, type Column, type ColumnSort } from '@tanstack/react-table';
 import { useState } from 'react';
 
-export const useColumnSorting = (column: Column<any>) => {
-  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
-  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+import { useTableContext } from '../components/Table/TableContext';
+
+export const useColumnSorting = () => {
+  const [columnSorting, setColumnSorting] = useState<ColumnSort[]>([]);
+
+  const sortColumn = (columnId: string, sortDirection: SortDirection) => {
+    setColumnSorting([{ id: columnId, desc: sortDirection === 'desc' }]);
+  };
+
+  const clearColumnSorting = () => {
+    setColumnSorting([]);
+  };
+
+  return { sorting: columnSorting, sortColumn, clearColumnSorting };
+};
+
+export type ColumnSorting = ReturnType<typeof useColumnSorting>;
+
+export const useSortColumn = (column: Column<any>) => {
+  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
+  const [initialSortDirection, setInitialSortDirection] = useState<SortDirection | undefined>();
+
+  const columnSort = sorting.find((s) => s.id === column.id);
+  const sortDirection = columnSort ? (columnSort.desc ? ('desc' as const) : ('asc' as const)) : undefined;
 
   const canSort = column.getCanSort();
 
-  const updateColumnSort = (direction: SortDirection | false) => {
-    setSortDirection(direction);
-
-    switch (direction) {
-      case false:
-        column.clearSorting();
-        break;
-      case 'asc':
-        column.toggleSorting(false); // descending false
-        break;
-      case 'desc':
-        column.toggleSorting(true); // descending true
-        break;
-    }
+  const updateColumnSort = (direction: SortDirection) => {
+    sortColumn(column.id, direction);
   };
 
   // Whichever sort is explicitly set first, will be the first sort direction
   // When toggling, we always go to the other direction, and then to unsorted.
   const onToggleSort = () => {
-    if (sortDirection === false) {
+    if (sortDirection === undefined) {
       return;
     }
 
-    if (sortDirection === firstSort) {
-      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    if (sortDirection === initialSortDirection) {
+      updateColumnSort(initialSortDirection === 'asc' ? 'desc' : 'asc');
     } else {
-      updateColumnSort(false);
+      clearColumnSorting();
     }
   };
 
   const onSelectSort = (direction: SortDirection) => {
-    setFirstSort(direction);
+    clearColumnSorting();
+    setInitialSortDirection(direction);
     updateColumnSort(direction);
   };
 
   const onClearSort = () => {
-    updateColumnSort(false);
+    clearColumnSorting();
   };
 
   return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };

package/src/schema/SchemaToTable.stories.tsx

@@ -54,7 +54,7 @@ export const SchemaTable = {
     return (
       <Table.Root>
         <Table.Viewport classNames='inset-0 fixed'>
-          <Table.Table<ExampleSchema>
+          <Table.Main<ExampleSchema>
             role='grid'
             rowsSelectable='multi'
             keyAccessor={(row) => JSON.stringify(row)}