@dxos/react-ui-table 0.3.9-main.14901ff → 0.3.9-main.16d375f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/lib/browser/index.mjs +195 -146
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/Cell/CellCombobox.d.ts.map +1 -1
  5. package/dist/types/src/components/ColumnMenu.d.ts.map +1 -1
  6. package/dist/types/src/components/Table/Table.d.ts.map +1 -1
  7. package/dist/types/src/components/Table/Table.stories.d.ts.map +1 -1
  8. package/dist/types/src/components/Table/props.d.ts +4 -2
  9. package/dist/types/src/components/Table/props.d.ts.map +1 -1
  10. package/dist/types/src/helpers.d.ts.map +1 -1
  11. package/dist/types/src/schema.d.ts +0 -1
  12. package/dist/types/src/schema.d.ts.map +1 -1
  13. package/dist/types/src/theme.d.ts.map +1 -1
  14. package/dist/types/src/translations.d.ts +11 -0
  15. package/dist/types/src/translations.d.ts.map +1 -1
  16. package/package.json +11 -12
  17. package/src/components/Cell/CellCombobox.tsx +4 -1
  18. package/src/components/ColumnMenu.tsx +16 -16
  19. package/src/components/Table/Table.stories.tsx +21 -12
  20. package/src/components/Table/Table.tsx +86 -25
  21. package/src/components/Table/props.ts +24 -16
  22. package/src/helpers.tsx +67 -54
  23. package/src/schema.ts +0 -8
  24. package/src/theme.ts +2 -2
  25. package/src/translations.ts +11 -0
package/dist/types/src/components/Table/props.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
2
+ import { type VirtualizerOptions } from '@tanstack/react-virtual';
2
3
  import { type ClassNameValue } from '@dxos/react-ui-types';
3
4
  import { type KeyValue, type TableColumnDef } from '../../types';
4
5
  export type TableFlags = Partial<{
@@ -10,6 +11,7 @@ export type TableFlags = Partial<{
10
11
  fullWidth: boolean;
11
12
  debug: boolean;
12
13
  expand: boolean;
14
+ stickyHeader: boolean;
13
15
  rowsSelectable: boolean | 'multi';
14
16
  }>;
15
17
  /**
@@ -19,7 +21,7 @@ export type TableCurrent<TData extends RowData> = Partial<{
19
21
  currentDatum: TData;
20
22
  onDatumClick: (datum: TData) => void;
21
23
  }>;
22
- export type TableProps<TData extends RowData> = TableFlags & TableCurrent<TData> & Partial<{
24
+ export type TableProps<TData extends RowData, ScrollElement extends Element | Window = Element, ItemElement extends Element = HTMLTableRowElement> = TableFlags & TableCurrent<TData> & Partial<{
23
25
  keyAccessor: KeyValue<TData>;
24
26
  data: TData[];
25
27
  columns: TableColumnDef<TData>[];
@@ -30,7 +32,7 @@ export type TableProps<TData extends RowData> = TableFlags & TableCurrent<TData>
30
32
  onRowSelectionChange: (rowSelection: RowSelectionState) => void;
31
33
  onDataSelectionChange: (dataSelection: TData[]) => void;
32
34
  classNames: ClassNameValue;
33
- }>;
35
+ } & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>>;
34
36
  export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
35
37
  export type TableContextValue<TData extends RowData> = TableFlags & TableCurrent<TData> & Pick<TableProps<TData>, 'keyAccessor'> & {
36
38
  table: Table<TData>;
package/dist/types/src/components/Table/props.d.ts.map CHANGED
@@ -1 +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,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,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;IAExD,UAAU,EAAE,cAAc,CAAC;CAC5B,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"}
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;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.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"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"}
package/dist/types/src/schema.d.ts CHANGED
@@ -4,7 +4,6 @@ export type TableDef = {
4
4
  columns: ColumnProps[];
5
5
  };
6
6
  export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
7
- export declare const columnTypes: Map<ColumnType, string>;
8
7
  export type ColumnProps = {
9
8
  id: string;
10
9
  prop: string;
package/dist/types/src/schema.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1 +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,CAC4C,CAAC;AAEtG,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"}
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,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 CHANGED
@@ -3,6 +3,17 @@ declare const _default: {
3
3
  'en-US': {
4
4
  table: {
5
5
  'no selection label': string;
6
+ 'number column type label': string;
7
+ 'boolean column type label': string;
8
+ 'date column type label': string;
9
+ 'string column type label': string;
10
+ 'ref column type label': string;
11
+ 'digits label': string;
12
+ 'save label': string;
13
+ 'delete label': string;
14
+ 'column label label': string;
15
+ 'property key label': string;
16
+ 'column type label': string;
6
17
  };
7
18
  };
8
19
  }[];
package/dist/types/src/translations.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;AAEtC,wBAQE"}
1
+ {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;;;;;;AAEtC,wBAmBE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-table",
3
- "version": "0.3.9-main.14901ff",
3
+ "version": "0.3.9-main.16d375f",
4
4
  "description": "A table component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,21 +20,20 @@
20
20
  "@radix-ui/react-context": "^1.0.0",
21
21
  "@radix-ui/react-use-controllable-state": "^1.0.0",
22
22
  "@tanstack/react-table": "^8.9.3",
23
+ "@tanstack/react-virtual": "^3.0.1",
23
24
  "date-fns": "^2.29.3",
24
- "lodash.defaultsdeep": "^4.6.1",
25
- "@dxos/invariant": "0.3.9-main.14901ff",
26
- "@dxos/keys": "0.3.9-main.14901ff",
27
- "@dxos/react-ui": "0.3.9-main.14901ff",
28
- "@dxos/react-ui-searchlist": "0.3.9-main.14901ff",
29
- "@dxos/react-ui-theme": "0.3.9-main.14901ff",
30
- "@dxos/react-ui-types": "0.3.9-main.14901ff",
31
- "@dxos/util": "0.3.9-main.14901ff",
32
- "@dxos/async": "0.3.9-main.14901ff"
25
+ "@dxos/async": "0.3.9-main.16d375f",
26
+ "@dxos/react-ui": "0.3.9-main.16d375f",
27
+ "@dxos/invariant": "0.3.9-main.16d375f",
28
+ "@dxos/keys": "0.3.9-main.16d375f",
29
+ "@dxos/react-ui-searchlist": "0.3.9-main.16d375f",
30
+ "@dxos/react-ui-theme": "0.3.9-main.16d375f",
31
+ "@dxos/util": "0.3.9-main.16d375f",
32
+ "@dxos/react-ui-types": "0.3.9-main.16d375f"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@faker-js/faker": "^8.0.2",
36
36
  "@phosphor-icons/react": "^2.0.5",
37
- "@types/lodash.defaultsdeep": "^4.6.6",
38
37
  "@types/react": "^18.0.21",
39
38
  "@types/react-dom": "^18.0.6",
40
39
  "chromatic": "^7.5.0",
@@ -43,7 +42,7 @@
43
42
  "react-dom": "^18.2.0",
44
43
  "vite": "^4.3.9",
45
44
  "vite-plugin-turbosnap": "^1.0.2",
46
- "@dxos/react-ui-theme": "0.3.9-main.14901ff"
45
+ "@dxos/react-ui-theme": "0.3.9-main.16d375f"
47
46
  },
48
47
  "peerDependencies": {
49
48
  "@phosphor-icons/react": "^2.0.5",
package/src/components/Cell/CellCombobox.tsx CHANGED
@@ -64,7 +64,10 @@ export const CellCombobox = <TData extends RowData>({
64
64
  {value ? (
65
65
  <>
66
66
  <span
67
- className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
67
+ className={mx(
68
+ 'font-normal text-start text-base flex-1 min-is-0 truncate mie-2',
69
+ !value && staticPlaceholderText,
70
+ )}
68
71
  >
69
72
  {model.getText(value)}
70
73
  </span>
package/src/components/ColumnMenu.tsx CHANGED
@@ -6,11 +6,12 @@ import { Check, CaretDown, Trash, X } from '@phosphor-icons/react';
6
6
  import { type HeaderContext, type RowData } from '@tanstack/react-table';
7
7
  import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
8
8
 
9
- import { Button, DensityProvider, Input, Popover, Select, Separator } from '@dxos/react-ui';
9
+ import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
10
10
  import { getSize, mx } from '@dxos/react-ui-theme';
11
11
  import { safeParseInt } from '@dxos/util';
12
12
 
13
- import { type TableDef, type ColumnProps, columnTypes } from '../schema';
13
+ import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
14
+ import { translationKey } from '../translations';
14
15
 
15
16
  export type ColumnMenuProps<TData extends RowData, TValue> = {
16
17
  context: HeaderContext<TData, TValue>;
@@ -23,13 +24,11 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
23
24
 
24
25
  export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
25
26
  const title = column.label?.length ? column.label : column.id;
26
-
27
27
  return (
28
- <div className='flex grow items-center overflow-hidden'>
29
- <div className='truncate' title={title}>
28
+ <div className='flex items-center gap-2'>
29
+ <div className='flex-1 min-is-0 truncate' title={title}>
30
30
  {title}
31
31
  </div>
32
- <div className='grow' />
33
32
  <div className='flex shrink-0'>
34
33
  <ColumnPanel {...props} column={column} />
35
34
  </div>
@@ -59,6 +58,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
59
58
  const [label, setLabel] = useState(column.label);
60
59
  const [digits, setDigits] = useState(String(column.digits ?? '0'));
61
60
  const propRef = useRef<HTMLInputElement>(null);
61
+ const { t } = useTranslation(translationKey);
62
62
 
63
63
  const handleCancel = () => {
64
64
  setProp(column.id);
@@ -99,7 +99,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
99
99
  return (
100
100
  <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
101
101
  <Popover.Trigger asChild>
102
- <Button variant='ghost' classNames='p-0'>
102
+ <Button variant='ghost' classNames='p-1'>
103
103
  <CaretDown className={getSize(4)} />
104
104
  </Button>
105
105
  </Popover.Trigger>
@@ -110,7 +110,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
110
110
  <div className='flex flex-col gap-1'>
111
111
  <Section>
112
112
  <Input.Root>
113
- <Input.Label classNames='mbe-1'>Label</Input.Label>
113
+ <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
114
114
  <Input.TextInput
115
115
  placeholder='Column label'
116
116
  value={label ?? ''}
@@ -119,7 +119,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
119
119
  />
120
120
  </Input.Root>
121
121
  <Input.Root>
122
- <Input.Label classNames='mbe-1 mbs-3'>Property</Input.Label>
122
+ <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
123
123
  <Input.TextInput
124
124
  ref={propRef}
125
125
  placeholder='Property key'
@@ -129,15 +129,15 @@ export const ColumnPanel = <TData extends RowData, TValue>({
129
129
  />
130
130
  </Input.Root>
131
131
  <Input.Root>
132
- <Input.Label classNames='mbe-1 mbs-3'>Type</Input.Label>
132
+ <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
133
133
  <Select.Root value={type} onValueChange={setType}>
134
134
  <Select.TriggerButton placeholder='Type' classNames='is-full' />
135
135
  <Select.Portal>
136
136
  <Select.Content>
137
137
  <Select.Viewport>
138
- {Array.from(columnTypes.entries()).map(([type, label]) => (
138
+ {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
139
139
  <Select.Option key={type} value={type}>
140
- {label}
140
+ {t(`${type} column type label`)}
141
141
  </Select.Option>
142
142
  ))}
143
143
  </Select.Viewport>
@@ -151,7 +151,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
151
151
  <>
152
152
  <Section>
153
153
  <Input.Root>
154
- <Input.Label classNames='mbe-1 mbs-3'>Decimal places</Input.Label>
154
+ <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
155
155
  {/* TODO(burdon): Constrain input to numbers. */}
156
156
  <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
157
157
  </Input.Root>
@@ -213,17 +213,17 @@ export const ColumnPanel = <TData extends RowData, TValue>({
213
213
  <Section className='space-b-1.5'>
214
214
  {/* TODO(burdon): Style as DropdownMenuItem. */}
215
215
  <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
216
- <span>Save</span>
216
+ <span>{t('save label')}</span>
217
217
  <div className='grow' />
218
218
  <Check className={getSize(5)} />
219
219
  </Button>
220
220
  <Button classNames='is-full flex gap-2' onClick={handleCancel}>
221
- <span>Cancel</span>
221
+ <span>{t('cancel label', { ns: 'os' })}</span>
222
222
  <div className='grow' />
223
223
  <X className={getSize(5)} />
224
224
  </Button>
225
225
  <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
226
- <span>Delete</span>
226
+ <span>{t('delete label')}</span>
227
227
  <div className='grow' />
228
228
  <Trash className={getSize(5)} />
229
229
  </Button>
package/src/components/Table/Table.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import '@dxosTheme';
7
7
  import { faker } from '@faker-js/faker';
8
8
  import { Plugs, PlugsConnected } from '@phosphor-icons/react';
9
9
  import { deepSignal } from 'deepsignal';
10
- import React, { useEffect, useState } from 'react';
10
+ import React, { useEffect, useRef, useState } from 'react';
11
11
 
12
12
  import { PublicKey } from '@dxos/keys';
13
13
  import { DensityProvider, AnchoredOverflow } from '@dxos/react-ui';
@@ -206,6 +206,7 @@ export const Empty = {
206
206
 
207
207
  export const Dynamic = {
208
208
  render: () => {
209
+ const containerRef = useRef<HTMLDivElement | null>(null);
209
210
  const [items, setItems] = useState<Item[]>(createItems(50));
210
211
  useEffect(() => {
211
212
  const interval = setInterval(() => {
@@ -219,7 +220,7 @@ export const Dynamic = {
219
220
  return () => clearInterval(interval);
220
221
  }, []);
221
222
  return (
222
- <AnchoredOverflow.Root classNames='max-bs-[80dvh]'>
223
+ <AnchoredOverflow.Root classNames='max-bs-[80dvh]' ref={containerRef}>
223
224
  <Table<Item>
224
225
  rowsSelectable='multi'
225
226
  keyAccessor={(row) => row.publicKey.toHex()}
@@ -227,6 +228,8 @@ export const Dynamic = {
227
228
  data={items}
228
229
  fullWidth
229
230
  footer
231
+ stickyHeader
232
+ getScrollElement={() => containerRef.current}
230
233
  />
231
234
  <AnchoredOverflow.Anchor />
232
235
  </AnchoredOverflow.Root>
@@ -236,21 +239,26 @@ export const Dynamic = {
236
239
 
237
240
  export const Editable = {
238
241
  render: () => {
239
- const [items, setItems] = useState<Item[]>(createItems(10));
242
+ const containerRef = useRef<HTMLDivElement | null>(null);
243
+ const [items, setItems] = useState<Item[]>(createItems(200));
240
244
  const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
241
245
  setItems((items) => updateItems(items, item.publicKey, prop, value));
242
246
  };
243
247
 
244
248
  return (
245
- <Table<Item>
246
- role='grid'
247
- rowsSelectable='multi'
248
- keyAccessor={(row) => row.publicKey.toHex()}
249
- columns={columns(onUpdate)}
250
- data={items}
251
- fullWidth
252
- border
253
- />
249
+ <div ref={containerRef} className='fixed inset-0 overflow-auto'>
250
+ <Table<Item>
251
+ role='grid'
252
+ rowsSelectable='multi'
253
+ keyAccessor={(row) => row.publicKey.toHex()}
254
+ columns={columns(onUpdate)}
255
+ data={items}
256
+ fullWidth
257
+ stickyHeader
258
+ border
259
+ getScrollElement={() => containerRef.current}
260
+ />
261
+ </div>
254
262
  );
255
263
  },
256
264
  };
@@ -273,6 +281,7 @@ export const Resizable = {
273
281
  columns={columns(onUpdate)}
274
282
  data={items}
275
283
  fullWidth
284
+ stickyHeader
276
285
  // onColumnResize={handleColumnResize}
277
286
  />
278
287
  );
package/src/components/Table/Table.tsx CHANGED
@@ -14,17 +14,90 @@ import {
14
14
  type RowSelectionState,
15
15
  type OnChangeFn,
16
16
  } from '@tanstack/react-table';
17
+ import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
17
18
  import React, { Fragment, useCallback, useEffect, useState } from 'react';
18
19
 
19
20
  import { debounce } from '@dxos/async';
20
21
 
21
22
  import { TableBody } from './TableBody';
22
- import { TableProvider as UntypedTableProvider, type TypedTableProvider } from './TableContext';
23
+ import { TableProvider as UntypedTableProvider, type TypedTableProvider, useTableContext } from './TableContext';
23
24
  import { TableFooter } from './TableFooter';
24
25
  import { TableHead } from './TableHead';
25
26
  import { type TableProps } from './props';
26
27
  import { groupTh, tableRoot } from '../../theme';
27
28
 
29
+ const VirtualizedTableContent = ({
30
+ getScrollElement,
31
+ }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
32
+ const {
33
+ table: { getRowModel },
34
+ } = useTableContext('VirtualizedTableContent');
35
+ const rows = getRowModel().rows;
36
+
37
+ const { getTotalSize, getVirtualItems } = useVirtualizer({
38
+ getScrollElement,
39
+ count: rows.length,
40
+ overscan: 16,
41
+ estimateSize: () => 33,
42
+ });
43
+ const virtualRows = getVirtualItems();
44
+ const totalSize = getTotalSize();
45
+
46
+ const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
47
+ const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
48
+
49
+ return (
50
+ <>
51
+ {paddingTop > 0 && (
52
+ <tbody role='none'>
53
+ <tr role='none'>
54
+ <td style={{ height: `${paddingTop}px` }} role='none' />
55
+ </tr>
56
+ </tbody>
57
+ )}
58
+ <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
59
+ {paddingBottom > 0 && (
60
+ <tbody role='none'>
61
+ <tr role='none'>
62
+ <td style={{ height: `${paddingBottom}px` }} role='none' />
63
+ </tr>
64
+ </tbody>
65
+ )}
66
+ </>
67
+ );
68
+ };
69
+
70
+ const GroupedTableContent = () => {
71
+ const {
72
+ table: { getGroupedRowModel, getHeaderGroups, getState },
73
+ debug,
74
+ } = useTableContext('GroupedTableContent');
75
+ return (
76
+ <>
77
+ {getGroupedRowModel().rows.map((row, i) => {
78
+ return (
79
+ <Fragment key={i}>
80
+ {/* TODO(burdon): Customize group header renderer. */}
81
+ <thead>
82
+ <tr>
83
+ {debug && <th />}
84
+ <th
85
+ // TODO(burdon): Calculate row span.
86
+ colSpan={getHeaderGroups()[0].headers.length}
87
+ className={groupTh({})}
88
+ >
89
+ {getState().grouping[0]}[{String(row.getGroupingValue(getState().grouping[0]))}]
90
+ </th>
91
+ </tr>
92
+ </thead>
93
+ <TableBody rows={row.subRows} />
94
+ </Fragment>
95
+ );
96
+ })}
97
+ </>
98
+ );
99
+ };
100
+
28
101
  export const Table = <TData extends RowData>(props: TableProps<TData>) => {
29
102
  const {
30
103
  role,
@@ -39,6 +112,7 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
39
112
  debug,
40
113
  onDataSelectionChange,
41
114
  classNames,
115
+ getScrollElement,
42
116
  } = props;
43
117
 
44
118
  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
@@ -122,6 +196,8 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
122
196
  debugTable: debug,
123
197
  });
124
198
 
199
+ const rows = table.getRowModel().rows;
200
+
125
201
  useEffect(() => {
126
202
  if (onDataSelectionChange) {
127
203
  onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
@@ -146,30 +222,15 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
146
222
  >
147
223
  <TableHead />
148
224
 
149
- {grouping.length === 0 && <TableBody rows={table.getRowModel().rows} />}
150
-
151
- {grouping.length !== 0 &&
152
- table.getGroupedRowModel().rows.map((row, i) => {
153
- return (
154
- <Fragment key={i}>
155
- {/* TODO(burdon): Customize group header renderer. */}
156
- <thead>
157
- <tr>
158
- {debug && <th />}
159
- <th
160
- // TODO(burdon): Calculate row span.
161
- colSpan={table.getHeaderGroups()[0].headers.length}
162
- className={groupTh(props)}
163
- >
164
- {table.getState().grouping[0]}[{String(row.getGroupingValue(table.getState().grouping[0]))}]
165
- </th>
166
- </tr>
167
- </thead>
168
-
169
- <TableBody rows={row.subRows} />
170
- </Fragment>
171
- );
172
- })}
225
+ {grouping.length === 0 ? (
226
+ getScrollElement ? (
227
+ <VirtualizedTableContent getScrollElement={getScrollElement} />
228
+ ) : (
229
+ <TableBody rows={rows} />
230
+ )
231
+ ) : (
232
+ <GroupedTableContent />
233
+ )}
173
234
 
174
235
  {footer && <TableFooter />}
175
236
  </table>
package/src/components/Table/props.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  //
4
4
 
5
5
  import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
6
+ import { type VirtualizerOptions } from '@tanstack/react-virtual';
6
7
 
7
8
  import { type ClassNameValue } from '@dxos/react-ui-types';
8
9
 
@@ -17,6 +18,7 @@ export type TableFlags = Partial<{
17
18
  fullWidth: boolean;
18
19
  debug: boolean;
19
20
  expand: boolean;
21
+ stickyHeader: boolean;
20
22
  rowsSelectable: boolean | 'multi';
21
23
  }>;
22
24
 
@@ -29,23 +31,29 @@ export type TableCurrent<TData extends RowData> = Partial<{
29
31
  onDatumClick: (datum: TData) => void;
30
32
  }>;
31
33
 
32
- export type TableProps<TData extends RowData> = TableFlags &
34
+ export type TableProps<
35
+ TData extends RowData,
36
+ ScrollElement extends Element | Window = Element,
37
+ ItemElement extends Element = HTMLTableRowElement,
38
+ > = TableFlags &
33
39
  TableCurrent<TData> &
34
- Partial<{
35
- keyAccessor: KeyValue<TData>;
36
- data: TData[];
37
- columns: TableColumnDef<TData>[];
38
- onColumnResize: (state: Record<string, number>) => void;
39
- columnVisibility: VisibilityState;
40
- // Controllable row selection
41
- rowSelection: RowSelectionState;
42
- defaultRowSelection: RowSelectionState;
43
- onRowSelectionChange: (rowSelection: RowSelectionState) => void;
44
- // Derived from row selection
45
- onDataSelectionChange: (dataSelection: TData[]) => void;
46
- // `table` element props
47
- classNames: ClassNameValue;
48
- }>;
40
+ Partial<
41
+ {
42
+ keyAccessor: KeyValue<TData>;
43
+ data: TData[];
44
+ columns: TableColumnDef<TData>[];
45
+ onColumnResize: (state: Record<string, number>) => void;
46
+ columnVisibility: VisibilityState;
47
+ // Controllable row selection
48
+ rowSelection: RowSelectionState;
49
+ defaultRowSelection: RowSelectionState;
50
+ onRowSelectionChange: (rowSelection: RowSelectionState) => void;
51
+ // Derived from row selection
52
+ onDataSelectionChange: (dataSelection: TData[]) => void;
53
+ // `table` element props
54
+ classNames: ClassNameValue;
55
+ } & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>
56
+ >;
49
57
 
50
58
  export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
51
59