@dxos/react-ui-table 0.4.8-main.fff1521 → 0.4.8-next.2e7285f
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.
- package/dist/lib/browser/index.mjs +224 -156
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/ColumnMenu.d.ts.map +1 -1
- package/dist/types/src/components/ColumnMenu.stories.d.ts +10 -1
- package/dist/types/src/components/ColumnMenu.stories.d.ts.map +1 -1
- package/dist/types/src/components/SortButton.d.ts +8 -0
- package/dist/types/src/components/SortButton.d.ts.map +1 -0
- package/dist/types/src/components/Table/Table.d.ts.map +1 -1
- package/dist/types/src/components/Table/TableBody.d.ts.map +1 -1
- package/dist/types/src/components/Table/TableHead.d.ts.map +1 -1
- package/dist/types/src/components/Table/props.d.ts +1 -0
- package/dist/types/src/components/Table/props.d.ts.map +1 -1
- package/dist/types/src/helpers.d.ts.map +1 -1
- package/package.json +15 -15
- package/src/components/ColumnMenu.stories.tsx +13 -6
- package/src/components/ColumnMenu.tsx +13 -4
- package/src/components/SortButton.tsx +34 -0
- package/src/components/Table/Table.tsx +39 -14
- package/src/components/Table/TableBody.tsx +1 -0
- package/src/components/Table/TableHead.tsx +4 -2
- package/src/components/Table/props.ts +1 -0
- package/src/helpers.tsx +11 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-table/src/translations.ts":{"bytes":2343,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytes":29348,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytes":2237,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":9834,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytes":4937,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"../Table/TableContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytes":7765,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Cell/Cell.tsx","kind":"import-statement","original":"../Cell/Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytes":4745,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytes":8774,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytes":30124,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableBody.tsx","kind":"import-statement","original":"./TableBody"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx","kind":"import-statement","original":"./TableFooter"},{"path":"packages/ui/react-ui-table/src/components/Table/TableHead.tsx","kind":"import-statement","original":"./TableHead"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/props.ts":{"bytes":3059,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":557,"imports":[{"path":"packages/ui/react-ui-table/src/components/Table/Table.tsx","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Table/props.ts","kind":"import-statement","original":"./props"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytes":11696,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx","kind":"import-statement","original":"./CellCombobox"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":644,"imports":[{"path":"packages/ui/react-ui-table/src/components/ColumnMenu.tsx","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/Table/index.ts","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Cell/index.ts","kind":"import-statement","original":"./Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":51013,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./components/Table/TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"}],"format":"esm"},"packages/ui/react-ui-table/src/schema.ts":{"bytes":1111,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":1830,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/index.ts":{"bytes":1017,"imports":[{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"./helpers"},{"path":"packages/ui/react-ui-table/src/schema.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-table/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-table/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":86355},"packages/ui/react-ui-table/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["CellCombobox","ColumnBuilder","ColumnMenu","ColumnPanel","MemoizedVirtualisedTableContent","Table","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadResizeThumb","theadRoot","theadTh","theadTr","translations"],"entryPoint":"packages/ui/react-ui-table/src/index.ts","inputs":{"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytesInOutput":7835},"packages/ui/react-ui-table/src/translations.ts":{"bytesInOutput":611},"packages/ui/react-ui-table/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":7806},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1733},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":234},"packages/ui/react-ui-table/src/theme.ts":{"bytesInOutput":2033},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytesInOutput":1000},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytesInOutput":1030},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytesInOutput":1987},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytesInOutput":3110},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/helpers.tsx":{"bytesInOutput":12462}},"bytes":41182}}}
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-table/src/components/SortButton.tsx":{"bytes":3261,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/translations.ts":{"bytes":2343,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytes":30689,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/SortButton.tsx","kind":"import-statement","original":"./SortButton"},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytes":2237,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":9834,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytes":4937,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"../Table/TableContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytes":7765,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Cell/Cell.tsx","kind":"import-statement","original":"../Cell/Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytes":4745,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytes":8895,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytes":32636,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableBody.tsx","kind":"import-statement","original":"./TableBody"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx","kind":"import-statement","original":"./TableFooter"},{"path":"packages/ui/react-ui-table/src/components/Table/TableHead.tsx","kind":"import-statement","original":"./TableHead"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/props.ts":{"bytes":3095,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":557,"imports":[{"path":"packages/ui/react-ui-table/src/components/Table/Table.tsx","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Table/props.ts","kind":"import-statement","original":"./props"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytes":11696,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx","kind":"import-statement","original":"./CellCombobox"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":644,"imports":[{"path":"packages/ui/react-ui-table/src/components/ColumnMenu.tsx","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/Table/index.ts","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Cell/index.ts","kind":"import-statement","original":"./Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":51909,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./components/Table/TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"}],"format":"esm"},"packages/ui/react-ui-table/src/schema.ts":{"bytes":1111,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":1830,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/index.ts":{"bytes":1017,"imports":[{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"./helpers"},{"path":"packages/ui/react-ui-table/src/schema.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-table/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-table/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":90934},"packages/ui/react-ui-table/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["CellCombobox","ColumnBuilder","ColumnMenu","ColumnPanel","MemoizedVirtualisedTableContent","Table","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadResizeThumb","theadRoot","theadTh","theadTr","translations"],"entryPoint":"packages/ui/react-ui-table/src/index.ts","inputs":{"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytesInOutput":8248},"packages/ui/react-ui-table/src/components/SortButton.tsx":{"bytesInOutput":796},"packages/ui/react-ui-table/src/translations.ts":{"bytesInOutput":611},"packages/ui/react-ui-table/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":8440},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1733},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":234},"packages/ui/react-ui-table/src/theme.ts":{"bytesInOutput":2033},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytesInOutput":1000},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytesInOutput":1030},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytesInOutput":2020},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytesInOutput":3095},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/helpers.tsx":{"bytesInOutput":12689}},"bytes":43331}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQzE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,WAAW,CAAC;AAG7E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,sGAoBtB,CAAC;AAQF,eAAO,MAAM,WAAW,+IAkMvB,CAAC"}
|
|
@@ -2,13 +2,22 @@ import '@dxosTheme';
|
|
|
2
2
|
import { type ColumnProps } from '../schema';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <TData extends unknown, TValue>({
|
|
5
|
+
component: <TData extends unknown, TValue>({ column, ...props }: import("./ColumnMenu").ColumnMenuProps<TData, TValue>) => JSX.Element;
|
|
6
6
|
decorators: import("@storybook/react").Decorator[];
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Default: {
|
|
10
10
|
args: {
|
|
11
11
|
column: ColumnProps;
|
|
12
|
+
context: {
|
|
13
|
+
header: {
|
|
14
|
+
column: {
|
|
15
|
+
getCanSort: () => boolean;
|
|
16
|
+
getToggleSortingHandler: () => () => void;
|
|
17
|
+
getIsSorted: () => boolean;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
12
21
|
};
|
|
13
22
|
decorators: ((Story: any) => JSX.Element)[];
|
|
14
23
|
parameters: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;;;AAE7C,wBAIE;AAEF,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;;;AAE7C,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;yBAiBR,GAAG;;;;CASd,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type SortDirection } from '@tanstack/react-table';
|
|
2
|
+
type SortButtonProps = {
|
|
3
|
+
sortDirection: false | SortDirection;
|
|
4
|
+
onClick: (e: any) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const SortButton: ({ sortDirection, onClick }: SortButtonProps) => JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=SortButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SortButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SortButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,eAAe,GAAG;IAAE,aAAa,EAAE,KAAK,GAAG,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAoBrE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAUlF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,eAAO,MAAM,KAAK,kEAuJjB,CAAC;AA+FF,eAAO,MAAM,+BAA+B,0BA1CzC,KAAK,mBAAmB,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,CAAC,gBA0CmD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,KAAK,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAS3E,KAAK,cAAc,CAAC,KAAK,SAAS,OAAO,IAAI;IAC3C,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS;;;
|
|
1
|
+
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,KAAK,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAS3E,KAAK,cAAc,CAAC,KAAK,SAAS,OAAO,IAAI;IAC3C,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS;;;CA+Cd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG,EAAE,CAAC;AAEzB,QAAA,MAAM,SAAS;oCAAmC,cAAc;;
|
|
1
|
+
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG,EAAE,CAAC;AAEzB,QAAA,MAAM,SAAS;oCAAmC,cAAc;;CA4D/D,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -32,6 +32,7 @@ export type TableProps<TData extends RowData, ScrollElement extends Element | Wi
|
|
|
32
32
|
onRowSelectionChange: (rowSelection: RowSelectionState) => void;
|
|
33
33
|
onDataSelectionChange: (dataSelection: TData[]) => void;
|
|
34
34
|
classNames: ClassNameValue;
|
|
35
|
+
pinLastRow: boolean;
|
|
35
36
|
} & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>>;
|
|
36
37
|
export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
|
|
37
38
|
export type TableContextValue<TData extends RowData> = TableFlags & TableCurrent<TData> & Pick<TableProps<TData>, 'keyAccessor'> & {
|
|
@@ -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;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;
|
|
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;IAC3B,UAAU,EAAE,OAAO,CAAC;CACrB,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"}
|
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-table",
|
|
3
|
-
"version": "0.4.8-
|
|
3
|
+
"version": "0.4.8-next.2e7285f",
|
|
4
4
|
"description": "A table component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
"@fluentui/react-tabster": "^9.19.0",
|
|
20
20
|
"@radix-ui/react-context": "^1.0.0",
|
|
21
21
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
22
|
-
"@tanstack/react-table": "^8.
|
|
22
|
+
"@tanstack/react-table": "^8.13.2",
|
|
23
23
|
"@tanstack/react-virtual": "^3.0.1",
|
|
24
24
|
"date-fns": "^3.3.1",
|
|
25
|
-
"@dxos/
|
|
26
|
-
"@dxos/
|
|
27
|
-
"@dxos/
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/react-ui": "0.4.8-
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/react-ui-theme": "0.4.8-
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/
|
|
25
|
+
"@dxos/async": "0.4.8-next.2e7285f",
|
|
26
|
+
"@dxos/invariant": "0.4.8-next.2e7285f",
|
|
27
|
+
"@dxos/keys": "0.4.8-next.2e7285f",
|
|
28
|
+
"@dxos/react-ui": "0.4.8-next.2e7285f",
|
|
29
|
+
"@dxos/react-ui-searchlist": "0.4.8-next.2e7285f",
|
|
30
|
+
"@dxos/log": "0.4.8-next.2e7285f",
|
|
31
|
+
"@dxos/react-ui-theme": "0.4.8-next.2e7285f",
|
|
32
|
+
"@dxos/react-ui-types": "0.4.8-next.2e7285f",
|
|
33
|
+
"@dxos/util": "0.4.8-next.2e7285f"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"react-dom": "^18.2.0",
|
|
41
41
|
"vite": "^5.1.5",
|
|
42
42
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
43
|
+
"@dxos/random": "0.4.8-next.2e7285f",
|
|
44
|
+
"@dxos/echo-schema": "0.4.8-next.2e7285f",
|
|
45
|
+
"@dxos/react-ui-theme": "0.4.8-next.2e7285f",
|
|
46
|
+
"@dxos/storybook-utils": "0.4.8-next.2e7285f"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -8,12 +8,12 @@ import React from 'react';
|
|
|
8
8
|
|
|
9
9
|
import { withTheme } from '@dxos/storybook-utils';
|
|
10
10
|
|
|
11
|
-
import {
|
|
11
|
+
import { ColumnMenu } from './ColumnMenu';
|
|
12
12
|
import { type ColumnProps } from '../schema';
|
|
13
13
|
|
|
14
14
|
export default {
|
|
15
|
-
title: 'react-ui-table/
|
|
16
|
-
component:
|
|
15
|
+
title: 'react-ui-table/ColumnMenu',
|
|
16
|
+
component: ColumnMenu,
|
|
17
17
|
decorators: [withTheme],
|
|
18
18
|
};
|
|
19
19
|
|
|
@@ -23,13 +23,20 @@ export const Default = {
|
|
|
23
23
|
id: 'test',
|
|
24
24
|
label: 'test',
|
|
25
25
|
} as ColumnProps,
|
|
26
|
+
context: {
|
|
27
|
+
header: {
|
|
28
|
+
column: {
|
|
29
|
+
getCanSort: () => true,
|
|
30
|
+
getToggleSortingHandler: () => () => console.log('toggleSort'),
|
|
31
|
+
getIsSorted: () => false,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
26
35
|
},
|
|
27
36
|
decorators: [
|
|
28
37
|
(Story: any) => (
|
|
29
38
|
<div className='flex flex-col items-center h-screen w-full overflow-hidden'>
|
|
30
|
-
<
|
|
31
|
-
<Story />
|
|
32
|
-
</div>
|
|
39
|
+
<Story />
|
|
33
40
|
</div>
|
|
34
41
|
),
|
|
35
42
|
],
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { Check,
|
|
5
|
+
import { Check, Trash, X, GearSix } 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
|
|
|
@@ -10,6 +10,7 @@ import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslat
|
|
|
10
10
|
import { getSize, mx } from '@dxos/react-ui-theme';
|
|
11
11
|
import { safeParseInt } from '@dxos/util';
|
|
12
12
|
|
|
13
|
+
import { SortButton } from './SortButton';
|
|
13
14
|
import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
|
|
14
15
|
import { translationKey } from '../translations';
|
|
15
16
|
|
|
@@ -24,12 +25,20 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
|
|
|
24
25
|
|
|
25
26
|
export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
|
|
26
27
|
const title = column.label?.length ? column.label : column.id;
|
|
28
|
+
|
|
29
|
+
const header = props.context.header;
|
|
30
|
+
|
|
31
|
+
const canSort = header.column.getCanSort();
|
|
32
|
+
const sortDirection = header.column.getIsSorted();
|
|
33
|
+
const toggleSort = header.column.getToggleSortingHandler();
|
|
34
|
+
|
|
27
35
|
return (
|
|
28
36
|
<div className='flex items-center gap-2'>
|
|
29
37
|
<div className='flex-1 min-is-0 truncate' title={title}>
|
|
30
38
|
{title}
|
|
31
39
|
</div>
|
|
32
|
-
<div className='flex
|
|
40
|
+
<div className='flex gap-0'>
|
|
41
|
+
{canSort && toggleSort && <SortButton sortDirection={sortDirection} onClick={toggleSort} />}
|
|
33
42
|
<ColumnPanel {...props} column={column} />
|
|
34
43
|
</div>
|
|
35
44
|
</div>
|
|
@@ -99,8 +108,8 @@ export const ColumnPanel = <TData extends RowData, TValue>({
|
|
|
99
108
|
return (
|
|
100
109
|
<Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
|
|
101
110
|
<Popover.Trigger asChild>
|
|
102
|
-
<Button variant='ghost'
|
|
103
|
-
<
|
|
111
|
+
<Button variant='ghost'>
|
|
112
|
+
<GearSix className={mx(getSize(4), 'rotate-90')} />
|
|
104
113
|
</Button>
|
|
105
114
|
</Popover.Trigger>
|
|
106
115
|
<Popover.Portal>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { CaretUpDown, SortAscending, SortDescending } from '@phosphor-icons/react';
|
|
6
|
+
import { type SortDirection } from '@tanstack/react-table';
|
|
7
|
+
import React, { type ReactElement } from 'react';
|
|
8
|
+
|
|
9
|
+
import { Button } from '@dxos/react-ui';
|
|
10
|
+
import { getSize } from '@dxos/react-ui-theme';
|
|
11
|
+
|
|
12
|
+
type SortButtonProps = { sortDirection: false | SortDirection; onClick: (e: any) => void };
|
|
13
|
+
|
|
14
|
+
export const SortButton = ({ sortDirection, onClick }: SortButtonProps) => {
|
|
15
|
+
let icon: ReactElement;
|
|
16
|
+
const size = getSize(4);
|
|
17
|
+
|
|
18
|
+
switch (sortDirection) {
|
|
19
|
+
case 'asc':
|
|
20
|
+
icon = <SortAscending className={size} />;
|
|
21
|
+
break;
|
|
22
|
+
case 'desc':
|
|
23
|
+
icon = <SortDescending className={size} />;
|
|
24
|
+
break;
|
|
25
|
+
default:
|
|
26
|
+
icon = <CaretUpDown className={size} />;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<Button variant='ghost' onClick={onClick}>
|
|
31
|
+
{icon}
|
|
32
|
+
</Button>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
5
5
|
import {
|
|
6
6
|
getCoreRowModel,
|
|
7
|
+
getSortedRowModel,
|
|
7
8
|
useReactTable,
|
|
8
9
|
type ColumnSizingInfoState,
|
|
9
10
|
type GroupingState,
|
|
@@ -12,13 +13,13 @@ import {
|
|
|
12
13
|
type OnChangeFn,
|
|
13
14
|
type RowSelectionState,
|
|
14
15
|
getGroupedRowModel,
|
|
16
|
+
getExpandedRowModel,
|
|
15
17
|
} from '@tanstack/react-table';
|
|
16
18
|
import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
|
|
17
19
|
import React, { Fragment, useCallback, useEffect, useState } from 'react';
|
|
18
20
|
|
|
19
|
-
import { debounce } from '@dxos/async';
|
|
20
21
|
import { log } from '@dxos/log';
|
|
21
|
-
import { useDefaultValue } from '@dxos/react-ui';
|
|
22
|
+
import { useDefaultValue, useOnTransition } from '@dxos/react-ui';
|
|
22
23
|
|
|
23
24
|
import { TableBody } from './TableBody';
|
|
24
25
|
import { TableProvider as UntypedTableProvider, type TypedTableProvider, useTableContext } from './TableContext';
|
|
@@ -37,6 +38,7 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
37
38
|
debug,
|
|
38
39
|
onDataSelectionChange,
|
|
39
40
|
getScrollElement,
|
|
41
|
+
pinLastRow,
|
|
40
42
|
} = props;
|
|
41
43
|
|
|
42
44
|
const columns = useDefaultValue(props.columns, []);
|
|
@@ -44,9 +46,14 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
44
46
|
|
|
45
47
|
const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
|
|
46
48
|
|
|
49
|
+
const [columnsInitialised, setColumnsInitialised] = useState(false);
|
|
47
50
|
const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
|
|
48
51
|
|
|
49
52
|
useEffect(() => {
|
|
53
|
+
if (columnsInitialised) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
50
57
|
setColumnSizing(
|
|
51
58
|
columns
|
|
52
59
|
.filter((column) => !!column.size && (column as any).prop !== undefined)
|
|
@@ -55,10 +62,16 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
55
62
|
return state;
|
|
56
63
|
}, {}),
|
|
57
64
|
);
|
|
65
|
+
|
|
66
|
+
setColumnsInitialised(true);
|
|
58
67
|
}, [columns, setColumnSizing]);
|
|
59
68
|
|
|
60
69
|
const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
|
|
61
70
|
|
|
71
|
+
// Notify on column resize.
|
|
72
|
+
const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
|
|
73
|
+
useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
|
|
74
|
+
|
|
62
75
|
const [rowSelection = {}, setRowSelection] = useControllableState({
|
|
63
76
|
prop: props.rowSelection,
|
|
64
77
|
onChange: props.onRowSelectionChange,
|
|
@@ -113,6 +126,8 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
113
126
|
|
|
114
127
|
// Rows
|
|
115
128
|
getCoreRowModel: getCoreRowModel(),
|
|
129
|
+
getSortedRowModel: getSortedRowModel(),
|
|
130
|
+
getExpandedRowModel: getExpandedRowModel(),
|
|
116
131
|
|
|
117
132
|
// Grouping
|
|
118
133
|
getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
|
|
@@ -123,23 +138,28 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
123
138
|
|
|
124
139
|
onRowSelectionChange: handleRowSelectionChange,
|
|
125
140
|
|
|
141
|
+
enableSorting: true,
|
|
142
|
+
enableColumnPinning: true,
|
|
143
|
+
|
|
126
144
|
// Debug
|
|
127
145
|
debugTable: debug,
|
|
128
146
|
});
|
|
129
147
|
|
|
130
|
-
const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1_000);
|
|
131
|
-
|
|
132
148
|
useEffect(() => {
|
|
133
149
|
onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
|
|
134
150
|
}, [onDataSelectionChange, rowSelection, table]);
|
|
135
151
|
|
|
136
152
|
useEffect(() => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
if (shouldTriggerResize) {
|
|
140
|
-
onColumnResizeDebounced?.(table.getState().columnSizing);
|
|
153
|
+
if (!pinLastRow) {
|
|
154
|
+
return;
|
|
141
155
|
}
|
|
142
|
-
|
|
156
|
+
|
|
157
|
+
// Clear row pinning
|
|
158
|
+
table.resetRowPinning();
|
|
159
|
+
|
|
160
|
+
const rows = table.getRowModel().rows;
|
|
161
|
+
rows[rows.length - 1].pin('bottom');
|
|
162
|
+
}, [pinLastRow, table, data]);
|
|
143
163
|
|
|
144
164
|
// Create additional expansion column if all columns have fixed width.
|
|
145
165
|
const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
|
|
@@ -167,7 +187,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
167
187
|
const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
|
|
168
188
|
const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
|
|
169
189
|
const { table } = useTableContext<TData>('TableImpl');
|
|
170
|
-
|
|
190
|
+
|
|
191
|
+
const centerRows = table.getCenterRows();
|
|
192
|
+
const bottomRows = table.getBottomRows();
|
|
193
|
+
|
|
194
|
+
const rows = [...centerRows, ...bottomRows];
|
|
171
195
|
|
|
172
196
|
if (debug) {
|
|
173
197
|
return (
|
|
@@ -209,11 +233,12 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
209
233
|
const VirtualizedTableContent = ({
|
|
210
234
|
getScrollElement,
|
|
211
235
|
}: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
|
|
212
|
-
const {
|
|
213
|
-
|
|
214
|
-
|
|
236
|
+
const { table } = useTableContext('VirtualizedTableContent');
|
|
237
|
+
|
|
238
|
+
const centerRows = table.getCenterRows();
|
|
239
|
+
const pinnedRows = table.getBottomRows();
|
|
215
240
|
|
|
216
|
-
const rows =
|
|
241
|
+
const rows = [...centerRows, ...pinnedRows];
|
|
217
242
|
|
|
218
243
|
const { getTotalSize, getVirtualItems } = useVirtualizer({
|
|
219
244
|
getScrollElement,
|
|
@@ -19,6 +19,7 @@ type TableBodyProps<TData extends RowData> = {
|
|
|
19
19
|
const TableBody = <TData extends RowData>({ rows }: TableBodyProps<TData>) => {
|
|
20
20
|
const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } =
|
|
21
21
|
useTableContext<TData>(TABLE_BODY_NAME);
|
|
22
|
+
|
|
22
23
|
const rowSelection = table.getState().rowSelection;
|
|
23
24
|
const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
|
|
24
25
|
const canBeCurrent = !isGrid && !!onDatumClick;
|
|
@@ -34,6 +34,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
|
|
|
34
34
|
|
|
35
35
|
{headerGroup.headers.map((header) => {
|
|
36
36
|
const isResizing = header.column.getIsResizing();
|
|
37
|
+
const resizeHandler = header.getResizeHandler();
|
|
38
|
+
|
|
37
39
|
return (
|
|
38
40
|
<th
|
|
39
41
|
key={header.id}
|
|
@@ -56,8 +58,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
|
|
|
56
58
|
style={{
|
|
57
59
|
transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`,
|
|
58
60
|
}}
|
|
59
|
-
onMouseDown={
|
|
60
|
-
onTouchStart={
|
|
61
|
+
onMouseDown={resizeHandler}
|
|
62
|
+
onTouchStart={resizeHandler}
|
|
61
63
|
>
|
|
62
64
|
<div className={mx(theadResizeThumb(tableContext))} />
|
|
63
65
|
</div>
|
package/src/helpers.tsx
CHANGED
|
@@ -121,10 +121,14 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
|
|
|
121
121
|
|
|
122
122
|
const handleCancel = () => setValue(initialValue);
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
const rows = cellContext.table.getRowModel().flatRows;
|
|
124
|
+
let placeholder = false;
|
|
126
125
|
const columns = cellContext.table.getVisibleFlatColumns();
|
|
127
|
-
|
|
126
|
+
|
|
127
|
+
// Calling getRowModel is expensive, so only do it when we're a cell in the first position
|
|
128
|
+
if (columns[0].id === cellContext.column.id) {
|
|
129
|
+
const rowCount = cellContext.table.getRowModel().rows.length;
|
|
130
|
+
placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
|
|
131
|
+
}
|
|
128
132
|
|
|
129
133
|
// TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
|
|
130
134
|
return (
|
|
@@ -461,6 +465,8 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
461
465
|
size: 50,
|
|
462
466
|
minSize: 50,
|
|
463
467
|
header: (column) => label ?? column.header.id,
|
|
468
|
+
// TODO(Zan): Implement sort algorithm
|
|
469
|
+
enableSorting: true,
|
|
464
470
|
cell: SwitchBuilderCell,
|
|
465
471
|
...props,
|
|
466
472
|
meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
|
|
@@ -475,6 +481,8 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
475
481
|
const IconOff = off?.Icon ?? X;
|
|
476
482
|
return {
|
|
477
483
|
size: size ?? 32,
|
|
484
|
+
// TODO(Zan): Implement sort algorithm
|
|
485
|
+
enableSorting: false,
|
|
478
486
|
header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
|
|
479
487
|
cell: (cell) => {
|
|
480
488
|
const value = cell.getValue();
|