@dxos/react-ui-table 0.3.7-main.8f93ef7 → 0.3.7-main.c3c2c7d
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/meta.json +1 -1
- package/dist/types/src/components/Table.stories.d.ts +3 -0
- package/dist/types/src/components/Table.stories.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +1 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/package.json +9 -9
- package/src/components/Table.stories.tsx +28 -55
- package/src/types.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-table/src/schema.ts":{"bytes":1836,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytes":28711,"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/schema.ts","kind":"import-statement","original":"../schema"}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":4180,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table.tsx":{"bytes":50838,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":564,"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.tsx","kind":"import-statement","original":"./Table"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":45871,"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":"lodash.defaultsdeep","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}],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-table/src/schema.ts":{"bytes":1836,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytes":28711,"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/schema.ts","kind":"import-statement","original":"../schema"}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":4180,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table.tsx":{"bytes":50838,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":564,"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.tsx","kind":"import-statement","original":"./Table"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":45871,"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":"lodash.defaultsdeep","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}],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":1522,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/index.ts":{"bytes":803,"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/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":70078},"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":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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":"lodash.defaultsdeep","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}],"exports":["ColumnBuilder","ColumnMenu","ColumnPanel","Table","columnTypes","createColumnBuilder","defaultTableSlots","updateSelection"],"entryPoint":"packages/ui/react-ui-table/src/index.ts","inputs":{"packages/ui/react-ui-table/src/components/ColumnMenu.tsx":{"bytesInOutput":7708},"packages/ui/react-ui-table/src/schema.ts":{"bytesInOutput":224},"packages/ui/react-ui-table/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table.tsx":{"bytesInOutput":11866},"packages/ui/react-ui-table/src/theme.ts":{"bytesInOutput":542},"packages/ui/react-ui-table/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/helpers.tsx":{"bytesInOutput":11339}},"bytes":32227}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;4BAiEsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyChB,GAAG;;;;;AA7Cf,wBA0DE;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;;CA8BnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAmBpB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAwBrB,CAAC"}
|
|
@@ -19,5 +19,5 @@ declare module '@tanstack/react-table' {
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
export type KeyValue<TData extends RowData> = (row: TData) => string;
|
|
22
|
-
export type TableColumnDef<TData extends RowData, TValue =
|
|
22
|
+
export type TableColumnDef<TData extends RowData, TValue = any> = ColumnDef<TData, TValue>;
|
|
23
23
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrE,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,SAAS,CAAC,KAAK,SAAS,OAAO;KAAI;IAG7C,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,KAAK,CAAC,EAAE;YACN,MAAM,CAAC,EAAE;gBACP,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;YACF,IAAI,CAAC,EAAE;gBACL,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;SACH,CAAC;KACH;CACF;AAED,MAAM,MAAM,QAAQ,CAAC,KAAK,SAAS,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;AAErE,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrE,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,SAAS,CAAC,KAAK,SAAS,OAAO;KAAI;IAG7C,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,KAAK,CAAC,EAAE;YACN,MAAM,CAAC,EAAE;gBACP,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;YACF,IAAI,CAAC,EAAE;gBACL,SAAS,CAAC,EAAE,MAAM,CAAC;aACpB,CAAC;SACH,CAAC;KACH;CACF;AAED,MAAM,MAAM,QAAQ,CAAC,KAAK,SAAS,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;AAErE,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-table",
|
|
3
|
-
"version": "0.3.7-main.
|
|
3
|
+
"version": "0.3.7-main.c3c2c7d",
|
|
4
4
|
"description": "A table component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
"@tanstack/react-table": "^8.9.3",
|
|
21
21
|
"date-fns": "^2.29.3",
|
|
22
22
|
"lodash.defaultsdeep": "^4.6.1",
|
|
23
|
-
"@dxos/async": "0.3.7-main.
|
|
24
|
-
"@dxos/invariant": "0.3.7-main.
|
|
25
|
-
"@dxos/
|
|
26
|
-
"@dxos/
|
|
27
|
-
"@dxos/react-ui-theme": "0.3.7-main.
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/
|
|
23
|
+
"@dxos/async": "0.3.7-main.c3c2c7d",
|
|
24
|
+
"@dxos/invariant": "0.3.7-main.c3c2c7d",
|
|
25
|
+
"@dxos/keys": "0.3.7-main.c3c2c7d",
|
|
26
|
+
"@dxos/react-ui": "0.3.7-main.c3c2c7d",
|
|
27
|
+
"@dxos/react-ui-theme": "0.3.7-main.c3c2c7d",
|
|
28
|
+
"@dxos/react-ui-types": "0.3.7-main.c3c2c7d",
|
|
29
|
+
"@dxos/util": "0.3.7-main.c3c2c7d"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@faker-js/faker": "^8.0.2",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react-dom": "^18.2.0",
|
|
41
41
|
"vite": "^4.3.9",
|
|
42
42
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
43
|
-
"@dxos/react-ui-theme": "0.3.7-main.
|
|
43
|
+
"@dxos/react-ui-theme": "0.3.7-main.c3c2c7d"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -46,60 +46,6 @@ const updateItems = <TValue = any,>(items: Item[], key: PublicKey, id: string, v
|
|
|
46
46
|
return items.map((item) => (item.publicKey.equals(key) ? { ...item, [id]: value } : item));
|
|
47
47
|
};
|
|
48
48
|
|
|
49
|
-
/*
|
|
50
|
-
// TODO(burdon): Remove.
|
|
51
|
-
const schamas: TableSchema[] = [
|
|
52
|
-
{
|
|
53
|
-
id: 'a',
|
|
54
|
-
props: [
|
|
55
|
-
{
|
|
56
|
-
id: 'complete',
|
|
57
|
-
type: 'boolean',
|
|
58
|
-
label: 'ok',
|
|
59
|
-
fixed: true,
|
|
60
|
-
editable: true,
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
id: 'name',
|
|
64
|
-
type: 'string',
|
|
65
|
-
editable: true,
|
|
66
|
-
resizable: true,
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
id: 'count',
|
|
70
|
-
type: 'number',
|
|
71
|
-
size: 160,
|
|
72
|
-
editable: true,
|
|
73
|
-
resizable: true,
|
|
74
|
-
},
|
|
75
|
-
],
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
id: 'b',
|
|
79
|
-
props: [
|
|
80
|
-
{
|
|
81
|
-
id: 'name',
|
|
82
|
-
type: 'string',
|
|
83
|
-
editable: true,
|
|
84
|
-
resizable: true,
|
|
85
|
-
},
|
|
86
|
-
],
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
id: 'c',
|
|
90
|
-
props: [
|
|
91
|
-
{
|
|
92
|
-
id: 'count',
|
|
93
|
-
type: 'number',
|
|
94
|
-
size: 160,
|
|
95
|
-
editable: true,
|
|
96
|
-
resizable: true,
|
|
97
|
-
},
|
|
98
|
-
],
|
|
99
|
-
},
|
|
100
|
-
];
|
|
101
|
-
*/
|
|
102
|
-
|
|
103
49
|
const { helper, builder } = createColumnBuilder<Item>();
|
|
104
50
|
const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
|
|
105
51
|
helper.accessor(
|
|
@@ -116,10 +62,11 @@ const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[
|
|
|
116
62
|
'name',
|
|
117
63
|
builder.string({ onUpdate, meta: { expand: true }, footer: (props) => props.table.getRowModel().rows.length }),
|
|
118
64
|
),
|
|
119
|
-
helper.accessor('started', builder.date({ relative: true })),
|
|
65
|
+
helper.accessor('started', builder.date({ relative: true, meta: { resizable: true } })),
|
|
120
66
|
helper.accessor(
|
|
121
67
|
'count',
|
|
122
68
|
builder.number({
|
|
69
|
+
meta: { resizable: true },
|
|
123
70
|
// TODO(burdon): Sorting.
|
|
124
71
|
getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
|
|
125
72
|
}),
|
|
@@ -280,3 +227,29 @@ export const Editable = {
|
|
|
280
227
|
);
|
|
281
228
|
},
|
|
282
229
|
};
|
|
230
|
+
|
|
231
|
+
export const Resizable = {
|
|
232
|
+
render: () => {
|
|
233
|
+
const [items, setItems] = useState<Item[]>(createItems(10));
|
|
234
|
+
const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
|
|
235
|
+
setItems((items) => updateItems(items, item.publicKey, prop, value));
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
// const handleColumnResize = (state) => {
|
|
239
|
+
// console.log('resize', state);
|
|
240
|
+
// };
|
|
241
|
+
|
|
242
|
+
return (
|
|
243
|
+
<div className='flex grow overflow-hidden'>
|
|
244
|
+
{/* prettier-ignore */}
|
|
245
|
+
<Table<Item>
|
|
246
|
+
keyAccessor={row => row.publicKey.toHex()}
|
|
247
|
+
columns={columns(onUpdate)}
|
|
248
|
+
data={items}
|
|
249
|
+
fullWidth
|
|
250
|
+
// onColumnResize={handleColumnResize}
|
|
251
|
+
/>
|
|
252
|
+
</div>
|
|
253
|
+
);
|
|
254
|
+
},
|
|
255
|
+
};
|
package/src/types.ts
CHANGED
|
@@ -30,4 +30,4 @@ declare module '@tanstack/react-table' {
|
|
|
30
30
|
|
|
31
31
|
export type KeyValue<TData extends RowData> = (row: TData) => string;
|
|
32
32
|
|
|
33
|
-
export type TableColumnDef<TData extends RowData, TValue =
|
|
33
|
+
export type TableColumnDef<TData extends RowData, TValue = any> = ColumnDef<TData, TValue>;
|