@dxos/react-ui-table 0.3.9-main.b7e6a67 → 0.3.9-main.c7cd0ec

package/dist/types/src/components/Table/Table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAKlD,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;4BAuGsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsChB,GAAG;;AA1Cf,wBAgDE;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,OAAO;;CA4BnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAmBpB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAsBrB,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAOvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAKlD,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;4BAuGsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAuChB,GAAG;;AA3Cf,wBAiDE;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,OAAO;;CA+BnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAwBpB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAuBrB,CAAC"}

package/dist/types/src/components/Table/props.d.ts

@@ -1,4 +1,6 @@
 import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
+import { type VirtualizerOptions } from '@tanstack/react-virtual';
+import { type ClassNameValue } from '@dxos/react-ui-types';
 import { type KeyValue, type TableColumnDef } from '../../types';
 export type TableFlags = Partial<{
     role: 'table' | 'grid' | 'treegrid';
@@ -9,6 +11,7 @@ export type TableFlags = Partial<{
     fullWidth: boolean;
     debug: boolean;
     expand: boolean;
+    stickyHeader: boolean;
     rowsSelectable: boolean | 'multi';
 }>;
 /**
@@ -18,7 +21,7 @@ export type TableCurrent<TData extends RowData> = Partial<{
     currentDatum: TData;
     onDatumClick: (datum: TData) => void;
 }>;
-export type TableProps<TData extends RowData> = TableFlags & TableCurrent<TData> & Partial<{
+export type TableProps<TData extends RowData, ScrollElement extends Element | Window = Element, ItemElement extends Element = HTMLTableRowElement> = TableFlags & TableCurrent<TData> & Partial<{
     keyAccessor: KeyValue<TData>;
     data: TData[];
     columns: TableColumnDef<TData>[];
@@ -28,7 +31,8 @@ export type TableProps<TData extends RowData> = TableFlags & TableCurrent<TData>
     defaultRowSelection: RowSelectionState;
     onRowSelectionChange: (rowSelection: RowSelectionState) => void;
     onDataSelectionChange: (dataSelection: TData[]) => void;
-}>;
+    classNames: ClassNameValue;
+} & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>>;
 export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
 export type TableContextValue<TData extends RowData> = TableFlags & TableCurrent<TData> & Pick<TableProps<TData>, 'keyAccessor'> & {
     table: Table<TData>;

package/dist/types/src/components/Table/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/props.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/G,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC;IAC/B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,OAAO,IAAI,OAAO,CAAC;IAExD,YAAY,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IAAI,UAAU,GACxD,YAAY,CAAC,KAAK,CAAC,GACnB,OAAO,CAAC;IACN,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,gBAAgB,EAAE,eAAe,CAAC;IAElC,YAAY,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,oBAAoB,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE,qBAAqB,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;CACzD,CAAC,CAAC;AAEL,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,OAAO,IAAI,UAAU,GAC/D,YAAY,CAAC,KAAK,CAAC,GACnB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/props.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC/G,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC;IAC/B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,OAAO,IAAI,OAAO,CAAC;IAExD,YAAY,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,CACpB,KAAK,SAAS,OAAO,EACrB,aAAa,SAAS,OAAO,GAAG,MAAM,GAAG,OAAO,EAChD,WAAW,SAAS,OAAO,GAAG,mBAAmB,IAC/C,UAAU,GACZ,YAAY,CAAC,KAAK,CAAC,GACnB,OAAO,CACL;IACE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,gBAAgB,EAAE,eAAe,CAAC;IAElC,YAAY,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,oBAAoB,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE,qBAAqB,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAExD,UAAU,EAAE,cAAc,CAAC;CAC5B,GAAG,IAAI,CAAC,kBAAkB,CAAC,aAAa,EAAE,WAAW,CAAC,EAAE,kBAAkB,CAAC,CAC7E,CAAC;AAEJ,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,OAAO,IAAI,UAAU,GAC/D,YAAY,CAAC,KAAK,CAAC,GACnB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC"}

package/dist/types/src/helpers.d.ts

@@ -70,11 +70,11 @@ export declare class ColumnBuilder<TData extends RowData> {
     /**
      * PublicKey with tooltip.
      */
-    key({ label, tooltip, ...props }?: KeyColumnOptions<TData>): Partial<ColumnDef<TData, PublicKey>>;
+    key({ label, tooltip, classNames, ...props }?: KeyColumnOptions<TData>): Partial<ColumnDef<TData, PublicKey>>;
     /**
      * Row selector
      */
-    selectRow({ label, classNames, onUpdate, id, ...props }?: SelectRowColumnOptions<TData>): Parameters<ColumnHelper<TData>['display']>[0];
+    selectRow({ classNames, onUpdate, id }?: SelectRowColumnOptions<TData>): Parameters<ColumnHelper<TData>['display']>[0];
     /**
      * Switch
      */

package/dist/types/src/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,IAAI,EAAK,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,OAAO,EACZ,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,gBAAgB,CAAC;AAQrE,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1G,eAAO,MAAM,mBAAmB;;;CAG9B,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,KAAK,EAAE,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;IACjF,IAAI,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,QAAQ,CAAC,EAAE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CACpD,CAAC;AAGF,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,OAAO,IAAI;IACxD,KAAK,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG;IACzF,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC;AAC/F,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC;AAElG,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC;AAEhG,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,OAAO,IAAI,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG;IACzF,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,GAAG,CAAC,EAAE;QACJ,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CAAC;AAuJF;;GAEG;AACH,qBAAa,aAAa,CAAC,KAAK,SAAS,OAAO;IAC9C;;OAEG;IACH,QAAQ,CAAC,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAqBhE;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAE,mBAAmB,CAAC,KAAK,CAAM,GAAG,OAAO,CACzF,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CACzB;IAiBD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAE,mBAAmB,CAAC,KAAK,CAAM,GAAG,OAAO,CAC1G,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CACzB;IAUD;;OAEG;IAEH,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAE,iBAAiB,CAAC,KAAK,CAAM,GAAG,OAAO,CACzG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CACvB;IA2BD;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAE,gBAAgB,CAAC,KAAK,CAAM,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAwCrG;;OAEG;IACH,SAAS,CAAC,EACR,KAAK,EACL,UAAU,EACV,QAAQ,EACR,EAAgB,EAChB,GAAG,KAAK,EACT,GAAE,sBAAsB,CAAC,KAAK,CAAM,GAAG,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAyBrF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAE,mBAAmB,CAAC,KAAK,CAAM,GAAG,OAAO,CACzF,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAC1B;IAUD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAE,iBAAiB,CAAC,KAAK,CAAM,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;CAkB5G"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/index.d.ts

@@ -2,5 +2,6 @@ export * from './components';
 export * from './helpers';
 export * from './schema';
 export * from './theme';
+export { default as translations } from './translations';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,SAAS,CAAC"}

package/dist/types/src/schema.d.ts

@@ -4,7 +4,6 @@ export type TableDef = {
     columns: ColumnProps[];
 };
 export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
-export declare const columnTypes: Map<ColumnType, string>;
 export type ColumnProps = {
     id: string;
     prop: string;

package/dist/types/src/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,eAAO,MAAM,WAAW,yBAMtB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/dist/types/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAWzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAE3C,eAAO,MAAM,iBAAiB,sFAAsF,CAAC;AAMrH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAC8B,CAAC;AAExF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAOpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,eAAe,CAI5D,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC;AAMzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAOtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAC/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAEvD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAWzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAE3C,eAAO,MAAM,iBAAiB,sFAAsF,CAAC;AAMrH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAC4D,CAAC;AAEtH,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAOpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,eAAe,CAI5D,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC;AAMzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAOtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAC/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAEvD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC"}

package/dist/types/src/translations.d.ts

@@ -3,6 +3,17 @@ declare const _default: {
     'en-US': {
         table: {
             'no selection label': string;
+            'number column type label': string;
+            'boolean column type label': string;
+            'date column type label': string;
+            'string column type label': string;
+            'ref column type label': string;
+            'digits label': string;
+            'save label': string;
+            'delete label': string;
+            'column label label': string;
+            'property key label': string;
+            'column type label': string;
         };
     };
 }[];

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;AAEtC,wBAQE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;;;;;;AAEtC,wBAmBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.3.9-main.b7e6a67",
+  "version": "0.3.9-main.c7cd0ec",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,30 +20,29 @@
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-virtual": "^3.0.1",
     "date-fns": "^2.29.3",
-    "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.3.9-main.b7e6a67",
-    "@dxos/invariant": "0.3.9-main.b7e6a67",
-    "@dxos/keys": "0.3.9-main.b7e6a67",
-    "@dxos/react-ui": "0.3.9-main.b7e6a67",
-    "@dxos/react-ui-theme": "0.3.9-main.b7e6a67",
-    "@dxos/react-ui-searchlist": "0.3.9-main.b7e6a67",
-    "@dxos/util": "0.3.9-main.b7e6a67",
-    "@dxos/react-ui-types": "0.3.9-main.b7e6a67"
+    "@dxos/async": "0.3.9-main.c7cd0ec",
+    "@dxos/invariant": "0.3.9-main.c7cd0ec",
+    "@dxos/react-ui": "0.3.9-main.c7cd0ec",
+    "@dxos/keys": "0.3.9-main.c7cd0ec",
+    "@dxos/react-ui-types": "0.3.9-main.c7cd0ec",
+    "@dxos/util": "0.3.9-main.c7cd0ec",
+    "@dxos/react-ui-searchlist": "0.3.9-main.c7cd0ec",
+    "@dxos/react-ui-theme": "0.3.9-main.c7cd0ec"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
-    "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "chromatic": "^7.5.0",
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.9-main.b7e6a67"
+    "@dxos/storybook-utils": "0.3.9-main.c7cd0ec",
+    "@dxos/react-ui-theme": "0.3.9-main.c7cd0ec"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -52,8 +51,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "chromatic": "true"
   }
 }

package/src/components/Cell/CellCombobox.tsx

@@ -64,7 +64,10 @@ export const CellCombobox = <TData extends RowData>({
         {value ? (
           <>
             <span
-              className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
+              className={mx(
+                'font-normal text-start text-base flex-1 min-is-0 truncate mie-2',
+                !value && staticPlaceholderText,
+              )}
             >
               {model.getText(value)}
             </span>

package/src/components/ColumnMenu.stories.tsx

@@ -6,11 +6,14 @@ import '@dxosTheme';
 
 import React from 'react';
 
+import { withTheme } from '@dxos/storybook-utils';
+
 import { ColumnPanel } from './ColumnMenu';
 import { type ColumnProps } from '../schema';
 
 export default {
   component: ColumnPanel,
+  decorators: [withTheme],
 };
 
 export const Default = {

package/src/components/ColumnMenu.tsx

@@ -6,11 +6,12 @@ import { Check, CaretDown, Trash, X } from '@phosphor-icons/react';
 import { type HeaderContext, type RowData } from '@tanstack/react-table';
 import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
 
-import { Button, DensityProvider, Input, Popover, Select, Separator } from '@dxos/react-ui';
+import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { safeParseInt } from '@dxos/util';
 
-import { type TableDef, type ColumnProps, columnTypes } from '../schema';
+import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
+import { translationKey } from '../translations';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
@@ -23,13 +24,11 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
 
 export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
   const title = column.label?.length ? column.label : column.id;
-
   return (
-    <div className='flex grow items-center overflow-hidden'>
-      <div className='truncate' title={title}>
+    <div className='flex items-center gap-2'>
+      <div className='flex-1 min-is-0 truncate' title={title}>
         {title}
       </div>
-      <div className='grow' />
       <div className='flex shrink-0'>
         <ColumnPanel {...props} column={column} />
       </div>
@@ -59,6 +58,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? '0'));
   const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
 
   const handleCancel = () => {
     setProp(column.id);
@@ -99,7 +99,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   return (
     <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
       <Popover.Trigger asChild>
-        <Button variant='ghost' classNames='p-0'>
+        <Button variant='ghost' classNames='p-1'>
           <CaretDown className={getSize(4)} />
         </Button>
       </Popover.Trigger>
@@ -110,7 +110,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
               <div className='flex flex-col gap-1'>
                 <Section>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1'>Label</Input.Label>
+                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
                     <Input.TextInput
                       placeholder='Column label'
                       value={label ?? ''}
@@ -119,7 +119,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Property</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
                     <Input.TextInput
                       ref={propRef}
                       placeholder='Property key'
@@ -129,15 +129,15 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Type</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
                     <Select.Root value={type} onValueChange={setType}>
                       <Select.TriggerButton placeholder='Type' classNames='is-full' />
                       <Select.Portal>
                         <Select.Content>
                           <Select.Viewport>
-                            {Array.from(columnTypes.entries()).map(([type, label]) => (
+                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
                               <Select.Option key={type} value={type}>
-                                {label}
+                                {t(`${type} column type label`)}
                               </Select.Option>
                             ))}
                           </Select.Viewport>
@@ -151,7 +151,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                   <>
                     <Section>
                       <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Decimal places</Input.Label>
+                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
                         {/* TODO(burdon): Constrain input to numbers. */}
                         <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
                       </Input.Root>
@@ -213,17 +213,17 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                 <Section className='space-b-1.5'>
                   {/* TODO(burdon): Style as DropdownMenuItem. */}
                   <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>Save</span>
+                    <span>{t('save label')}</span>
                     <div className='grow' />
                     <Check className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>Cancel</span>
+                    <span>{t('cancel label', { ns: 'os' })}</span>
                     <div className='grow' />
                     <X className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>Delete</span>
+                    <span>{t('delete label')}</span>
                     <div className='grow' />
                     <Trash className={getSize(5)} />
                   </Button>

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

@@ -7,10 +7,11 @@ import '@dxosTheme';
 import { faker } from '@faker-js/faker';
 import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import { deepSignal } from 'deepsignal';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
 import { DensityProvider, AnchoredOverflow } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
@@ -168,6 +169,7 @@ export default {
     },
   },
   decorators: [
+    withTheme,
     (Story: any) => (
       <DensityProvider density='fine'>
         <Story />
@@ -206,6 +208,7 @@ export const Empty = {
 
 export const Dynamic = {
   render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(50));
     useEffect(() => {
       const interval = setInterval(() => {
@@ -219,7 +222,7 @@ export const Dynamic = {
       return () => clearInterval(interval);
     }, []);
     return (
-      <AnchoredOverflow.Root classNames='max-bs-[80dvh]'>
+      <AnchoredOverflow.Root classNames='max-bs-[80dvh]' ref={containerRef}>
         <Table<Item>
           rowsSelectable='multi'
           keyAccessor={(row) => row.publicKey.toHex()}
@@ -227,6 +230,8 @@ export const Dynamic = {
           data={items}
           fullWidth
           footer
+          stickyHeader
+          getScrollElement={() => containerRef.current}
         />
         <AnchoredOverflow.Anchor />
       </AnchoredOverflow.Root>
@@ -236,21 +241,26 @@ export const Dynamic = {
 
 export const Editable = {
   render: () => {
-    const [items, setItems] = useState<Item[]>(createItems(10));
+    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));
     };
 
     return (
-      <Table<Item>
-        role='grid'
-        rowsSelectable='multi'
-        keyAccessor={(row) => row.publicKey.toHex()}
-        columns={columns(onUpdate)}
-        data={items}
-        fullWidth
-        border
-      />
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<Item>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
+          columns={columns(onUpdate)}
+          data={items}
+          fullWidth
+          stickyHeader
+          border
+          getScrollElement={() => containerRef.current}
+        />
+      </div>
     );
   },
 };
@@ -273,6 +283,7 @@ export const Resizable = {
         columns={columns(onUpdate)}
         data={items}
         fullWidth
+        stickyHeader
         // onColumnResize={handleColumnResize}
       />
     );

package/src/components/Table/Table.tsx

@@ -14,17 +14,90 @@ import {
   type RowSelectionState,
   type OnChangeFn,
 } 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 { TableBody } from './TableBody';
-import { TableProvider as UntypedTableProvider, type TypedTableProvider } from './TableContext';
+import { TableProvider as UntypedTableProvider, type TypedTableProvider, useTableContext } from './TableContext';
 import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { type TableProps } from './props';
 import { groupTh, tableRoot } from '../../theme';
 
+const VirtualizedTableContent = ({
+  getScrollElement,
+}: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
+  const {
+    table: { getRowModel },
+  } = useTableContext('VirtualizedTableContent');
+  const rows = getRowModel().rows;
+
+  const { getTotalSize, getVirtualItems } = useVirtualizer({
+    getScrollElement,
+    count: rows.length,
+    overscan: 16,
+    estimateSize: () => 33,
+  });
+  const virtualRows = getVirtualItems();
+  const totalSize = getTotalSize();
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
+
+  return (
+    <>
+      {paddingTop > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingTop}px` }} role='none' />
+          </tr>
+        </tbody>
+      )}
+      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
+      {paddingBottom > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingBottom}px` }} role='none' />
+          </tr>
+        </tbody>
+      )}
+    </>
+  );
+};
+
+const GroupedTableContent = () => {
+  const {
+    table: { getGroupedRowModel, getHeaderGroups, getState },
+    debug,
+  } = useTableContext('GroupedTableContent');
+  return (
+    <>
+      {getGroupedRowModel().rows.map((row, i) => {
+        return (
+          <Fragment key={i}>
+            {/* TODO(burdon): Customize group header renderer. */}
+            <thead>
+              <tr>
+                {debug && <th />}
+                <th
+                  // TODO(burdon): Calculate row span.
+                  colSpan={getHeaderGroups()[0].headers.length}
+                  className={groupTh({})}
+                >
+                  {getState().grouping[0]}[{String(row.getGroupingValue(getState().grouping[0]))}]
+                </th>
+              </tr>
+            </thead>
+            <TableBody rows={row.subRows} />
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
@@ -38,6 +111,8 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     fullWidth,
     debug,
     onDataSelectionChange,
+    classNames,
+    getScrollElement,
   } = props;
 
   const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
@@ -121,6 +196,8 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     debugTable: debug,
   });
 
+  const rows = table.getRowModel().rows;
+
   useEffect(() => {
     if (onDataSelectionChange) {
       onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
@@ -138,33 +215,22 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
       table={table}
       isGrid={role === 'grid' || role === 'treegrid'}
     >
-      <table role={role} className={tableRoot(props)} {...(!fullWidth && { style: { width: table.getTotalSize() } })}>
+      <table
+        role={role}
+        className={tableRoot(props, classNames)}
+        {...(!fullWidth && { style: { width: table.getTotalSize() } })}
+      >
         <TableHead />
 
-        {grouping.length === 0 && <TableBody rows={table.getRowModel().rows} />}
-
-        {grouping.length !== 0 &&
-          table.getGroupedRowModel().rows.map((row, i) => {
-            return (
-              <Fragment key={i}>
-                {/* TODO(burdon): Customize group header renderer. */}
-                <thead>
-                  <tr>
-                    {debug && <th />}
-                    <th
-                      // TODO(burdon): Calculate row span.
-                      colSpan={table.getHeaderGroups()[0].headers.length}
-                      className={groupTh(props)}
-                    >
-                      {table.getState().grouping[0]}[{String(row.getGroupingValue(table.getState().grouping[0]))}]
-                    </th>
-                  </tr>
-                </thead>
-
-                <TableBody rows={row.subRows} />
-              </Fragment>
-            );
-          })}
+        {grouping.length === 0 ? (
+          getScrollElement ? (
+            <VirtualizedTableContent getScrollElement={getScrollElement} />
+          ) : (
+            <TableBody rows={rows} />
+          )
+        ) : (
+          <GroupedTableContent />
+        )}
 
         {footer && <TableFooter />}
       </table>