@dxos/react-ui-table 0.3.8-next.f4e0086 → 0.3.9-main.03b62b6

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { flexRender, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { useTableContext } from './TableContext';
+import { theadResizeRoot, theadResizeThumb, theadRoot, theadTh, theadTr } from '../../theme';
+
+const TABLE_HEAD_NAME = 'TableHead';
+
+type TableHeadProps = {};
+
+const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
+  const tableContext = useTableContext<TData>(TABLE_HEAD_NAME);
+  const headerGroups = tableContext.table.getHeaderGroups();
+  const state = tableContext.table.getState();
+  return (
+    <thead className={theadRoot(tableContext)}>
+      {headerGroups.map((headerGroup) => {
+        return (
+          // Group element to hover resize handles.
+          <tr key={headerGroup.id} className={theadTr(tableContext)}>
+            {/* TODO(burdon): Calc. width. */}
+            {tableContext.debug && (
+              <th className='font-mono' style={{ width: 32 }}>
+                #
+              </th>
+            )}
+
+            {headerGroup.headers.map((header) => {
+              const isResizing = header.column.getIsResizing();
+              return (
+                <th
+                  key={header.id}
+                  style={{
+                    width: header.getSize(),
+                  }}
+                  className={theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)}
+                >
+                  {!header || header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+
+                  {/*
+                   * Resize handle.
+                   * https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/column-sizing
+                   */}
+                  {header.column.columnDef.meta?.resizable && (
+                    <div
+                      className={theadResizeRoot(tableContext, isResizing && 'hidden')}
+                      style={{
+                        transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`,
+                      }}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                    >
+                      <div className={mx(theadResizeThumb(tableContext))} />
+                    </div>
+                  )}
+                </th>
+              );
+            })}
+            {tableContext.expand && <th />}
+          </tr>
+        );
+      })}
+    </thead>
+  );
+};
+
+TableHead.displayName = TABLE_HEAD_NAME;
+
+export { TableHead };
+
+export type { TableHeadProps };

package/src/components/Table/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Table';
+export * from './props';

package/src/components/Table/props.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
+
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+import { type KeyValue, type TableColumnDef } from '../../types';
+
+export type TableFlags = Partial<{
+  role: 'table' | 'grid' | 'treegrid';
+  grouping: string[];
+  header: boolean;
+  footer: boolean;
+  border: boolean;
+  fullWidth: boolean;
+  debug: boolean;
+  expand: boolean;
+  stickyHeader: boolean;
+  rowsSelectable: boolean | 'multi';
+}>;
+
+/**
+ * This is ‘current’ in the `aria-current` sense.
+ */
+export type TableCurrent<TData extends RowData> = Partial<{
+  // App state
+  currentDatum: TData;
+  onDatumClick: (datum: TData) => void;
+}>;
+
+export type TableProps<TData extends RowData> = TableFlags &
+  TableCurrent<TData> &
+  Partial<{
+    keyAccessor: KeyValue<TData>;
+    data: TData[];
+    columns: TableColumnDef<TData>[];
+    onColumnResize: (state: Record<string, number>) => void;
+    columnVisibility: VisibilityState;
+    // Controllable row selection
+    rowSelection: RowSelectionState;
+    defaultRowSelection: RowSelectionState;
+    onRowSelectionChange: (rowSelection: RowSelectionState) => void;
+    // Derived from row selection
+    onDataSelectionChange: (dataSelection: TData[]) => void;
+    // `table` element props
+    classNames: ClassNameValue;
+  }>;
+
+export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
+
+export type TableContextValue<TData extends RowData> = TableFlags &
+  TableCurrent<TData> &
+  Pick<TableProps<TData>, 'keyAccessor'> & {
+    table: Table<TData>;
+    isGrid: boolean;
+  };

package/src/components/index.ts

@@ -4,4 +4,4 @@
 
 export * from './ColumnMenu';
 export * from './Table';
-export * from './ComboboxCell';
+export * from './Cell';