@dxos/react-ui-table 0.4.8-main.3a03fb7 → 0.4.8-main.4a229ac

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

@@ -5,12 +5,12 @@
 import '@dxosTheme';
 
 import { Plugs, PlugsConnected } from '@phosphor-icons/react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import * as E from '@dxos/echo-schema/schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { DensityProvider, AnchoredOverflow } from '@dxos/react-ui';
+import { AnchoredOverflow, DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
@@ -72,7 +72,7 @@ const tableStorySelectModel: SearchListQueryModel<Item> = {
 
 const { helper, builder } = createColumnBuilder<Item>();
 
-const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
+const makeColumns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
   helper.display(builder.selectRow()),
   helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
   helper.accessor(
@@ -90,26 +90,14 @@ const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[
     builder.number({
       label: 'Count',
       meta: { resizable: true },
-      // TODO(burdon): Sorting.
-      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
-    }),
-  ),
-  helper.accessor(
-    'company',
-    builder.combobox({
-      label: 'Company',
-      model: tableStorySelectModel,
       onUpdate,
+      getGroupingValue: (row) => (row.count ? (row.count < 2000 ? 'A' : row.count < 5000 ? 'B' : 'C') : 'D'),
     }),
   ),
+  helper.accessor('company', builder.combobox({ label: 'Company', model: tableStorySelectModel, onUpdate })),
   helper.accessor(
     'complete',
-    builder.switch({
-      // enableGrouping: true,
-      getGroupingValue: (row) => row.complete === true,
-      label: '',
-      onUpdate,
-    }),
+    builder.switch({ getGroupingValue: (row) => row.complete === true, label: '', onUpdate }),
   ),
   helper.accessor('complete', builder.icon({ id: 'done', label: '' })),
   helper.accessor(
@@ -135,18 +123,10 @@ export default {
     keyAccessor: (item: Item) => item.publicKey.toHex(),
   },
   argTypes: {
-    header: {
-      control: 'boolean',
-    },
-    footer: {
-      control: 'boolean',
-    },
-    border: {
-      control: 'boolean',
-    },
-    fullWidth: {
-      control: 'boolean',
-    },
+    header: { control: 'boolean' },
+    footer: { control: 'boolean' },
+    border: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
     grouping: {
       control: 'select',
       options: ['none', 'complete', 'count'],
@@ -164,10 +144,7 @@ export default {
         limited: { key: false, started: false },
       },
     },
-    rowsSelectable: {
-      control: 'select',
-      options: [false, true, 'multi'],
-    },
+    rowsSelectable: { control: 'select', options: [false, true, 'multi'] },
   },
   decorators: [
     withTheme,
@@ -181,21 +158,21 @@ export default {
 
 export const Default = {
   args: {
-    columns: columns(),
+    columns: makeColumns(),
     data: createItems(20),
   },
 };
 
 export const Scrolling = {
   args: {
-    columns: columns(),
+    columns: makeColumns(),
     data: createItems(200),
   },
 };
 
 export const Visibility = {
   args: {
-    columns: columns(),
+    columns: makeColumns(),
     data: createItems(10),
     columnVisibility: { key: false, started: false },
   },
@@ -203,7 +180,7 @@ export const Visibility = {
 
 export const Empty = {
   args: {
-    columns: columns(),
+    columns: makeColumns(),
   },
 };
 
@@ -211,6 +188,7 @@ export const Dynamic = {
   render: () => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(50));
+
     useEffect(() => {
       const interval = setInterval(() => {
         setItems((items) => {
@@ -223,12 +201,14 @@ export const Dynamic = {
       return () => clearInterval(interval);
     }, []);
 
+    const columns = useMemo(() => makeColumns(), []);
+
     return (
       <AnchoredOverflow.Root classNames='max-bs-[80dvh]' ref={containerRef}>
         <Table<Item>
           rowsSelectable='multi'
           keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns()}
+          columns={columns}
           data={items}
           fullWidth
           footer
@@ -245,9 +225,13 @@ export const Editable = {
   render: () => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(200));
-    const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
-      setItems((items) => updateItems(items, item.publicKey, prop, value));
-    };
+
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
 
     return (
       <div ref={containerRef} className='fixed inset-0 overflow-auto'>
@@ -255,7 +239,7 @@ export const Editable = {
           role='grid'
           rowsSelectable='multi'
           keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
+          columns={columns}
           data={items}
           fullWidth
           stickyHeader
@@ -269,25 +253,27 @@ export const Editable = {
 
 export const Resizable = {
   render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(10));
-    const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
-      setItems((items) => updateItems(items, item.publicKey, prop, value));
-    };
 
-    // const handleColumnResize = (state) => {
-    //   console.log('resize', state);
-    // };
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
 
     return (
-      <Table<Item>
-        rowsSelectable='multi'
-        keyAccessor={(row) => row.publicKey.toHex()}
-        columns={columns(onUpdate)}
-        data={items}
-        fullWidth
-        stickyHeader
-        // onColumnResize={handleColumnResize}
-      />
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<Item>
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
+          columns={makeColumns(onUpdate)}
+          data={items}
+          fullWidth
+          stickyHeader
+          getScrollElement={() => containerRef.current}
+          // onColumnResize={handleColumnResize}
+        />
+      </div>
     );
   },
 };
@@ -297,9 +283,12 @@ export const TenThousandRows = {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(10000));
 
-    const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
-      setItems((items) => updateItems(items, item.publicKey, prop, value));
-    };
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
 
     return (
       <div ref={containerRef} className='fixed inset-0 overflow-auto'>
@@ -307,7 +296,7 @@ export const TenThousandRows = {
           role='grid'
           rowsSelectable='multi'
           keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
+          columns={columns}
           data={items}
           fullWidth
           stickyHeader

package/src/components/Table/Table.tsx

@@ -4,6 +4,7 @@
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import {
   getCoreRowModel,
+  getSortedRowModel,
   useReactTable,
   type ColumnSizingInfoState,
   type GroupingState,
@@ -12,12 +13,14 @@ import {
   type OnChangeFn,
   type RowSelectionState,
   getGroupedRowModel,
+  getExpandedRowModel,
 } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { log } from '@dxos/log';
+import { useDefaultValue } from '@dxos/react-ui';
 
 import { TableBody } from './TableBody';
 import { TableProvider as UntypedTableProvider, type TypedTableProvider, useTableContext } from './TableContext';
@@ -29,8 +32,6 @@ import { groupTh, tableRoot } from '../../theme';
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
-    data = [],
-    columns = [],
     onColumnResize,
     columnVisibility,
     header = true,
@@ -38,18 +39,17 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     debug,
     onDataSelectionChange,
     getScrollElement,
+    pinLastRow,
   } = props;
 
-  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
+  const columns = useDefaultValue(props.columns, []);
+  const data = useDefaultValue(props.data, []);
 
-  //
-  // Column resizing
-  //
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
 
   const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
 
   useEffect(() => {
-    // Set initial state.
     setColumnSizing(
       columns
         .filter((column) => !!column.size && (column as any).prop !== undefined)
@@ -58,31 +58,16 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
           return state;
         }, {}),
     );
-  }, [columns]);
+  }, [columns, setColumnSizing]);
 
   const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
 
-  const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1_000);
-  useEffect(() => {
-    if (columnSizingInfo.columnSizingStart?.length === 0) {
-      onColumnResizeDebounced?.(table.getState().columnSizing);
-    }
-  }, [columnSizingInfo]);
-
-  //
-  // Row selection
-  //
-
   const [rowSelection = {}, setRowSelection] = useControllableState({
     prop: props.rowSelection,
     onChange: props.onRowSelectionChange,
     defaultProp: props.defaultRowSelection,
   });
 
-  useEffect(() => {
-    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-  }, [onDataSelectionChange, rowSelection]);
-
   // TODO(thure): Does @tanstack/react-table really need this intervention? It did seem necessary to enforce single-selection...
   const handleRowSelectionChange = useCallback<OnChangeFn<RowSelectionState>>(
     (updaterOrValue) => {
@@ -96,15 +81,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
         setRowSelection({});
       }
     },
-    [rowSelection, setRowSelection],
+    [rowsSelectable, setRowSelection, rowSelection],
   );
 
-  //
-  // Row grouping
-  //
-
   const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
-  useEffect(() => handleGroupingChange(props.grouping ?? []), [props.grouping]);
+  useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
 
   const table = useReactTable({
     // Data
@@ -135,23 +116,50 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
 
     // Rows
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
 
     // Grouping
     getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
     onGroupingChange: handleGroupingChange,
 
-    // Selection
-    ...(rowsSelectable === 'multi'
-      ? { enableMultiRowSelection: true }
-      : rowsSelectable
-        ? { enableRowSelection: true }
-        : {}),
+    enableMultiRowSelection: rowsSelectable === 'multi' ? true : undefined,
+    enableRowSelection: rowsSelectable === true ? true : undefined,
+
     onRowSelectionChange: handleRowSelectionChange,
 
+    enableSorting: true,
+    enableColumnPinning: true,
+
     // Debug
     debugTable: debug,
   });
 
+  const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1_000);
+
+  useEffect(() => {
+    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
+  }, [onDataSelectionChange, rowSelection, table]);
+
+  useEffect(() => {
+    // TODO(zan): This is super jank, let's think of a nicer way to do this ... later.
+    if (pinLastRow) {
+      // Clear row pinning
+      table.resetRowPinning();
+
+      const rows = table.getRowModel().rows;
+      rows[rows.length - 1].pin('bottom');
+    }
+  }, [pinLastRow, table, data]);
+
+  useEffect(() => {
+    const shouldTriggerResize = columnSizingInfo.columnSizingStart?.length === 0;
+
+    if (shouldTriggerResize) {
+      onColumnResizeDebounced?.(table.getState().columnSizing);
+    }
+  }, [columnSizingInfo, onColumnResizeDebounced, table]);
+
   // Create additional expansion column if all columns have fixed width.
   const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
 
@@ -178,7 +186,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext<TData>('TableImpl');
-  const { rows } = table.getRowModel();
+
+  const centerRows = table.getCenterRows();
+  const bottomRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...bottomRows];
 
   if (debug) {
     return (
@@ -188,6 +200,8 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
     );
   }
 
+  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+
   return (
     <table
       role={role}
@@ -198,7 +212,11 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
 
       {grouping?.length !== 0 ? (
         getScrollElement ? (
-          <VirtualizedTableContent getScrollElement={getScrollElement} />
+          isResizingColumn ? (
+            <MemoizedVirtualisedTableContent getScrollElement={getScrollElement} />
+          ) : (
+            <VirtualizedTableContent getScrollElement={getScrollElement} />
+          )
         ) : (
           <TableBody rows={rows} />
         )
@@ -214,10 +232,12 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
 const VirtualizedTableContent = ({
   getScrollElement,
 }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
-  const {
-    table: { getRowModel },
-  } = useTableContext('VirtualizedTableContent');
-  const rows = getRowModel().rows;
+  const { table } = useTableContext('VirtualizedTableContent');
+
+  const centerRows = table.getCenterRows();
+  const pinnedRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...pinnedRows];
 
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
@@ -225,6 +245,7 @@ const VirtualizedTableContent = ({
     overscan: 4,
     estimateSize: () => 33,
   });
+
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
 
@@ -252,6 +273,8 @@ const VirtualizedTableContent = ({
   );
 };
 
+export const MemoizedVirtualisedTableContent = React.memo(VirtualizedTableContent) as typeof VirtualizedTableContent;
+
 const GroupedTableContent = () => {
   const {
     table: { getGroupedRowModel, getHeaderGroups, getState },

package/src/components/Table/TableBody.tsx

@@ -19,6 +19,7 @@ type TableBodyProps<TData extends RowData> = {
 const TableBody = <TData extends RowData>({ rows }: TableBodyProps<TData>) => {
   const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } =
     useTableContext<TData>(TABLE_BODY_NAME);
+
   const rowSelection = table.getState().rowSelection;
   const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
   const canBeCurrent = !isGrid && !!onDatumClick;

package/src/components/Table/TableHead.tsx

@@ -34,6 +34,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
 
             {headerGroup.headers.map((header) => {
               const isResizing = header.column.getIsResizing();
+              const resizeHandler = header.getResizeHandler();
+
               return (
                 <th
                   key={header.id}
@@ -56,8 +58,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
                       style={{
                         transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`,
                       }}
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
+                      onMouseDown={resizeHandler}
+                      onTouchStart={resizeHandler}
                     >
                       <div className={mx(theadResizeThumb(tableContext))} />
                     </div>

package/src/components/Table/props.ts

@@ -52,6 +52,7 @@ export type TableProps<
       onDataSelectionChange: (dataSelection: TData[]) => void;
       // `table` element props
       classNames: ClassNameValue;
+      pinLastRow: boolean;
     } & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>
   >;
 

package/src/helpers.tsx

@@ -95,8 +95,11 @@ const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TDa
 };
 
 const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const ref = useRef<HTMLInputElement>(null);
+  const { findPrevFocusable } = useFocusFinders();
+
+  const { onUpdate, cell } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+
   // https://tanstack.com/table/v8/docs/examples/react/editable-data
   const initialValue = cellContext.getValue();
   const [value, setValue] = useState(() => {
@@ -109,32 +112,34 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   });
 
   const handleSave = () => {
-    if (value === initialValue) {
-      return;
-    }
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
 
-    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    if (value !== initialValue) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    }
   };
 
-  const handleCancel = () => {
-    setValue(initialValue);
-  };
+  const handleCancel = () => setValue(initialValue);
 
-  // Check if first input column of last row.
-  const rows = cellContext.table.getRowModel().flatRows;
+  let placeholder = false;
   const columns = cellContext.table.getVisibleFlatColumns();
-  const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
+
+  // Calling getRowModel is expensive, so only do it when we're a cell in the first position
+  if (columns[0].id === cellContext.column.id) {
+    const rowCount = cellContext.table.getRowModel().rows.length;
+    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
+  }
 
   // TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
   return (
     <Input.Root>
       <Input.TextInput
-        ref={inputRef}
+        ref={ref}
         variant='subdued'
         placeholder={placeholder ? 'Add row...' : undefined}
-        classNames={['is-full', textPadding]}
+        classNames={['is-full', textPadding, cell?.classNames]}
         value={value ?? ''}
-        onBlur={() => handleSave()}
+        onBlur={handleSave}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
       />
@@ -164,17 +169,20 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [digits, value]);
 
-  const handleEdit = () => {
-    if (onUpdate) {
-      setText(value !== undefined ? String(value) : '');
-    }
-  };
+  const handleEdit = () => setText(value !== undefined ? String(value) : '');
 
   // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
   const handleSave = () => {
     const nextValue = parseNumber(text);
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? undefined : nextValue);
-    setText(displayNumber(nextValue, digits));
+
+    if (!isNaN(nextValue)) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
+      setText(displayNumber(nextValue, digits));
+    } else {
+      // Reset the text to display the original value without updating the model.
+      setText(displayNumber(value, digits));
+    }
+
     // Shift focus only if input is focused on save (e.g. on `Enter`).
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
@@ -210,20 +218,23 @@ const RowSelectorBuilderCell = <TData extends RowData>(cellContext: CellContext<
   const checked = row.getCanSelect()
     ? row.getIsSelected()
     : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? 'indeterminate' : row.getIsAllSubRowsSelected());
+
   return (
-    <Input.Root>
-      <Input.Checkbox
-        size={4}
-        classNames={['mli-auto', cell?.classNames]}
-        checked={checked}
-        onCheckedChange={(event) => {
-          if (row.getCanSelect()) {
-            row.getToggleSelectedHandler()(event);
-          }
-        }}
-        disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
-      />
-    </Input.Root>
+    <div className='flex justify-center w-full h-full' role='presentation'>
+      <Input.Root>
+        <Input.Checkbox
+          size={4}
+          classNames={[cell?.classNames]}
+          checked={checked}
+          onCheckedChange={(event) => {
+            if (row.getCanSelect()) {
+              row.getToggleSelectedHandler()(event);
+            }
+          }}
+          disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
+        />
+      </Input.Root>
+    </div>
   );
 };
 
@@ -422,21 +433,22 @@ export class ColumnBuilder<TData extends RowData> {
     return {
       id,
       size: 32,
-      minSize: 32,
-      maxSize: 32,
+      enableResizing: false,
       meta: { onUpdate, cell: { classNames } },
       header: ({ table }) => {
         const { rowsSelectable } = useTableContext('HELPER_SELECT_ROW_HEADER_CELL');
         const checked = table.getIsSomeRowsSelected() ? 'indeterminate' : table.getIsAllRowsSelected();
         return rowsSelectable === 'multi' ? (
-          <Input.Root>
-            <Input.Checkbox
-              size={4}
-              classNames={['mli-auto', classNames]}
-              checked={checked}
-              onCheckedChange={() => table.toggleAllRowsSelected()}
-            />
-          </Input.Root>
+          <div className='flex justify-center w-full h-full' role='presentation'>
+            <Input.Root>
+              <Input.Checkbox
+                size={4}
+                classNames={['mli-auto', classNames]}
+                checked={checked}
+                onCheckedChange={() => table.toggleAllRowsSelected()}
+              />
+            </Input.Root>
+          </div>
         ) : null;
       },
       cell: RowSelectorBuilderCell,
@@ -453,6 +465,8 @@ export class ColumnBuilder<TData extends RowData> {
       size: 50,
       minSize: 50,
       header: (column) => label ?? column.header.id,
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: true,
       cell: SwitchBuilderCell,
       ...props,
       meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
@@ -467,6 +481,8 @@ export class ColumnBuilder<TData extends RowData> {
     const IconOff = off?.Icon ?? X;
     return {
       size: size ?? 32,
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: false,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
       cell: (cell) => {
         const value = cell.getValue();