@dxos/react-ui-table 0.3.8 → 0.3.9-main.14901ff
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 +54 -36
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- 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/props.d.ts +2 -0
- package/dist/types/src/components/Table/props.d.ts.map +1 -1
- package/dist/types/src/helpers.d.ts +2 -2
- package/dist/types/src/helpers.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/theme.d.ts +0 -2
- package/dist/types/src/theme.d.ts.map +1 -1
- package/package.json +10 -10
- package/src/components/Table/Table.tsx +6 -1
- package/src/components/Table/TableBody.tsx +2 -1
- package/src/components/Table/props.ts +4 -0
- package/src/helpers.tsx +57 -49
- package/src/index.ts +1 -0
- package/src/theme.ts +13 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,IAAI,EAAK,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,OAAO,EACZ,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,SAAS,CAAC"}
|
|
@@ -19,8 +19,6 @@ export declare const theadResizeThumb: ComponentFunction<TheadStyleProps>;
|
|
|
19
19
|
export type TbodyStyleProps = Partial<TableContextValue<any>>;
|
|
20
20
|
export declare const tbodyRoot: ComponentFunction<TbodyStyleProps>;
|
|
21
21
|
export type TbodyTrStyleProps = Partial<{
|
|
22
|
-
isSelected?: boolean;
|
|
23
|
-
isCurrent?: boolean;
|
|
24
22
|
canBeCurrent?: boolean;
|
|
25
23
|
}>;
|
|
26
24
|
export declare const tbodyTr: ComponentFunction<TbodyTrStyleProps>;
|
|
@@ -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;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-table",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.9-main.14901ff",
|
|
4
4
|
"description": "A table component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"@tanstack/react-table": "^8.9.3",
|
|
23
23
|
"date-fns": "^2.29.3",
|
|
24
24
|
"lodash.defaultsdeep": "^4.6.1",
|
|
25
|
-
"@dxos/invariant": "0.3.
|
|
26
|
-
"@dxos/
|
|
27
|
-
"@dxos/react-ui": "0.3.
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/react-ui-theme": "0.3.
|
|
30
|
-
"@dxos/react-ui-types": "0.3.
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
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"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@faker-js/faker": "^8.0.2",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-dom": "^18.2.0",
|
|
44
44
|
"vite": "^4.3.9",
|
|
45
45
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
46
|
-
"@dxos/react-ui-theme": "0.3.
|
|
46
|
+
"@dxos/react-ui-theme": "0.3.9-main.14901ff"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -38,6 +38,7 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
38
38
|
fullWidth,
|
|
39
39
|
debug,
|
|
40
40
|
onDataSelectionChange,
|
|
41
|
+
classNames,
|
|
41
42
|
} = props;
|
|
42
43
|
|
|
43
44
|
const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
|
|
@@ -138,7 +139,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
|
|
|
138
139
|
table={table}
|
|
139
140
|
isGrid={role === 'grid' || role === 'treegrid'}
|
|
140
141
|
>
|
|
141
|
-
<table
|
|
142
|
+
<table
|
|
143
|
+
role={role}
|
|
144
|
+
className={tableRoot(props, classNames)}
|
|
145
|
+
{...(!fullWidth && { style: { width: table.getTotalSize() } })}
|
|
146
|
+
>
|
|
142
147
|
<TableHead />
|
|
143
148
|
|
|
144
149
|
{grouping.length === 0 && <TableBody rows={table.getRowModel().rows} />}
|
|
@@ -30,8 +30,9 @@ const TableBody = <TData extends RowData>({ rows }: TableBodyProps<TData>) => {
|
|
|
30
30
|
return (
|
|
31
31
|
<tr
|
|
32
32
|
key={keyAccessor ? keyAccessor(row.original) : row.id}
|
|
33
|
-
className={tbodyTr({
|
|
33
|
+
className={tbodyTr({ canBeCurrent })}
|
|
34
34
|
{...(isCurrent && { 'aria-current': 'location' })}
|
|
35
|
+
{...(isSelected && { 'aria-selected': 'true' })}
|
|
35
36
|
{...(canBeCurrent && {
|
|
36
37
|
tabIndex: 0,
|
|
37
38
|
onClick: () => {
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
|
|
6
6
|
|
|
7
|
+
import { type ClassNameValue } from '@dxos/react-ui-types';
|
|
8
|
+
|
|
7
9
|
import { type KeyValue, type TableColumnDef } from '../../types';
|
|
8
10
|
|
|
9
11
|
export type TableFlags = Partial<{
|
|
@@ -41,6 +43,8 @@ export type TableProps<TData extends RowData> = TableFlags &
|
|
|
41
43
|
onRowSelectionChange: (rowSelection: RowSelectionState) => void;
|
|
42
44
|
// Derived from row selection
|
|
43
45
|
onDataSelectionChange: (dataSelection: TData[]) => void;
|
|
46
|
+
// `table` element props
|
|
47
|
+
classNames: ClassNameValue;
|
|
44
48
|
}>;
|
|
45
49
|
|
|
46
50
|
export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
|
package/src/helpers.tsx
CHANGED
|
@@ -13,13 +13,11 @@ import {
|
|
|
13
13
|
} from '@tanstack/react-table';
|
|
14
14
|
import format from 'date-fns/format';
|
|
15
15
|
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
|
|
16
|
-
import defaultsDeep from 'lodash.defaultsdeep';
|
|
17
16
|
import React, { useRef, useState } from 'react';
|
|
18
17
|
|
|
19
18
|
import { type PublicKey } from '@dxos/keys';
|
|
20
19
|
import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
|
|
21
20
|
import { getSize, mx } from '@dxos/react-ui-theme';
|
|
22
|
-
import { stripUndefinedValues } from '@dxos/util';
|
|
23
21
|
|
|
24
22
|
import { CellCombobox } from './components';
|
|
25
23
|
import { useTableContext } from './components/Table/TableContext';
|
|
@@ -32,6 +30,7 @@ export const createColumnBuilder = <TData extends RowData>() => ({
|
|
|
32
30
|
builder: new ColumnBuilder<TData>(),
|
|
33
31
|
});
|
|
34
32
|
|
|
33
|
+
// TODO(thure): This interface is redundant, e.g. `classNames` == `meta.cell.classNames`
|
|
35
34
|
/**
|
|
36
35
|
* NOTE: Can use `meta` for custom properties.
|
|
37
36
|
*/
|
|
@@ -82,22 +81,15 @@ export type IconColumnOptions<TData extends RowData> = BaseColumnOptions<TData,
|
|
|
82
81
|
};
|
|
83
82
|
};
|
|
84
83
|
|
|
85
|
-
const defaults = <TData extends RowData, TValue>(
|
|
86
|
-
options: Partial<ColumnDef<TData, TValue>>,
|
|
87
|
-
...sources: Partial<ColumnDef<TData, TValue>>[]
|
|
88
|
-
): Partial<ColumnDef<TData, TValue>> => {
|
|
89
|
-
return stripUndefinedValues(defaultsDeep({}, options, ...sources));
|
|
90
|
-
};
|
|
91
|
-
|
|
92
84
|
const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, TData>) => {
|
|
93
85
|
const { model, onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, TData>;
|
|
94
|
-
return (
|
|
86
|
+
return model ? (
|
|
95
87
|
<CellCombobox<TData>
|
|
96
|
-
model={model
|
|
88
|
+
model={model}
|
|
97
89
|
value={cellContext.getValue()}
|
|
98
90
|
onValueChange={(value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)}
|
|
99
91
|
/>
|
|
100
|
-
);
|
|
92
|
+
) : null;
|
|
101
93
|
};
|
|
102
94
|
|
|
103
95
|
const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
|
|
@@ -245,12 +237,14 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
245
237
|
onUpdate,
|
|
246
238
|
...props
|
|
247
239
|
}: ComboboxColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
|
|
248
|
-
return
|
|
240
|
+
return {
|
|
241
|
+
...props,
|
|
249
242
|
minSize: 100,
|
|
250
243
|
meta: {
|
|
244
|
+
...props.meta,
|
|
251
245
|
model,
|
|
252
246
|
onUpdate,
|
|
253
|
-
cell: { classNames },
|
|
247
|
+
cell: { classNames, ...props.meta?.cell },
|
|
254
248
|
},
|
|
255
249
|
header: (column) => {
|
|
256
250
|
return label ?? column.header.id;
|
|
@@ -262,7 +256,7 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
262
256
|
const cellValue = cellContext.getValue();
|
|
263
257
|
return <div className={mx('truncate', classNames)}>{cellValue ? model?.getText(cellValue) : ''}</div>;
|
|
264
258
|
},
|
|
265
|
-
}
|
|
259
|
+
};
|
|
266
260
|
}
|
|
267
261
|
|
|
268
262
|
/**
|
|
@@ -271,9 +265,14 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
271
265
|
string({ label, classNames, onUpdate, ...props }: StringColumnOptions<TData> = {}): Partial<
|
|
272
266
|
ColumnDef<TData, string>
|
|
273
267
|
> {
|
|
274
|
-
return
|
|
268
|
+
return {
|
|
269
|
+
...props,
|
|
275
270
|
minSize: 100,
|
|
276
|
-
meta: {
|
|
271
|
+
meta: {
|
|
272
|
+
...props.meta,
|
|
273
|
+
onUpdate,
|
|
274
|
+
cell: { ...props.meta?.cell, classNames },
|
|
275
|
+
},
|
|
277
276
|
// TODO(burdon): Default.
|
|
278
277
|
header: (column) => {
|
|
279
278
|
return label ?? column.header.id;
|
|
@@ -284,7 +283,7 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
284
283
|
const value = cell.getValue();
|
|
285
284
|
return <div className={mx('truncate', textPadding, classNames)}>{value}</div>;
|
|
286
285
|
},
|
|
287
|
-
}
|
|
286
|
+
};
|
|
288
287
|
}
|
|
289
288
|
|
|
290
289
|
/**
|
|
@@ -293,13 +292,20 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
293
292
|
number({ label, minSize, classNames, digits, onUpdate, ...props }: NumberColumnOptions<TData> = {}): Partial<
|
|
294
293
|
ColumnDef<TData, number>
|
|
295
294
|
> {
|
|
296
|
-
return
|
|
295
|
+
return {
|
|
296
|
+
...props,
|
|
297
297
|
size: 100,
|
|
298
298
|
minSize: 100,
|
|
299
|
-
meta: {
|
|
299
|
+
meta: {
|
|
300
|
+
...props.meta,
|
|
301
|
+
onUpdate,
|
|
302
|
+
digits,
|
|
303
|
+
header: { classNames: 'text-end', ...props.meta?.header },
|
|
304
|
+
cell: { ...props.meta?.cell, classNames },
|
|
305
|
+
},
|
|
300
306
|
header: (cell) => label ?? cell.header.id,
|
|
301
307
|
cell: NumberBuilderCell,
|
|
302
|
-
}
|
|
308
|
+
};
|
|
303
309
|
}
|
|
304
310
|
|
|
305
311
|
/**
|
|
@@ -309,10 +315,11 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
309
315
|
date({ label, format: formatSpec, relative, classNames, ...props }: DateColumnOptions<TData> = {}): Partial<
|
|
310
316
|
ColumnDef<TData, Date>
|
|
311
317
|
> {
|
|
312
|
-
return
|
|
318
|
+
return {
|
|
319
|
+
...props,
|
|
313
320
|
size: 220, // TODO(burdon): Depends on format.
|
|
314
321
|
minSize: 100,
|
|
315
|
-
meta: { cell: { classNames } },
|
|
322
|
+
meta: { ...props.meta, cell: { ...props.meta?.cell, classNames } },
|
|
316
323
|
header: (cell) => label ?? cell.header.id,
|
|
317
324
|
cell: (cell) => {
|
|
318
325
|
const value = cell.getValue();
|
|
@@ -332,17 +339,18 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
332
339
|
return null;
|
|
333
340
|
}
|
|
334
341
|
},
|
|
335
|
-
}
|
|
342
|
+
};
|
|
336
343
|
}
|
|
337
344
|
|
|
338
345
|
/**
|
|
339
346
|
* PublicKey with tooltip.
|
|
340
347
|
*/
|
|
341
|
-
key({ label, tooltip, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
|
|
342
|
-
return
|
|
348
|
+
key({ label, tooltip, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
|
|
349
|
+
return {
|
|
350
|
+
...props,
|
|
343
351
|
size: 94,
|
|
344
352
|
minSize: 94,
|
|
345
|
-
meta: { cell: { classNames: ['font-mono', textPadding] } },
|
|
353
|
+
meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
|
|
346
354
|
header: (cell) => label ?? cell.header.id,
|
|
347
355
|
cell: (cell) => {
|
|
348
356
|
const value = cell.getValue();
|
|
@@ -360,32 +368,30 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
360
368
|
<Tooltip.Provider>
|
|
361
369
|
<Tooltip.Root>
|
|
362
370
|
<Tooltip.Trigger>{element}</Tooltip.Trigger>
|
|
363
|
-
<Tooltip.
|
|
364
|
-
<Tooltip.
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
ev
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
371
|
+
<Tooltip.Portal>
|
|
372
|
+
<Tooltip.Content side='right'>
|
|
373
|
+
<Tooltip.Arrow />
|
|
374
|
+
<ClipboardText
|
|
375
|
+
onClick={(ev) => {
|
|
376
|
+
ev.stopPropagation(); // Prevent select row.
|
|
377
|
+
void navigator.clipboard.writeText(value.toHex());
|
|
378
|
+
}}
|
|
379
|
+
/>
|
|
380
|
+
</Tooltip.Content>
|
|
381
|
+
</Tooltip.Portal>
|
|
372
382
|
</Tooltip.Root>
|
|
373
383
|
</Tooltip.Provider>
|
|
374
384
|
);
|
|
375
385
|
},
|
|
376
|
-
}
|
|
386
|
+
};
|
|
377
387
|
}
|
|
378
388
|
|
|
379
389
|
/**
|
|
380
390
|
* Row selector
|
|
381
391
|
*/
|
|
382
|
-
selectRow({
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
onUpdate,
|
|
386
|
-
id = 'selectRow',
|
|
387
|
-
...props
|
|
388
|
-
}: SelectRowColumnOptions<TData> = {}): Parameters<ColumnHelper<TData>['display']>[0] {
|
|
392
|
+
selectRow({ classNames, onUpdate, id = 'selectRow' }: SelectRowColumnOptions<TData> = {}): Parameters<
|
|
393
|
+
ColumnHelper<TData>['display']
|
|
394
|
+
>[0] {
|
|
389
395
|
return {
|
|
390
396
|
id,
|
|
391
397
|
size: 32,
|
|
@@ -416,13 +422,14 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
416
422
|
switch({ label, classNames, onUpdate, ...props }: SwitchColumnOptions<TData> = {}): Partial<
|
|
417
423
|
ColumnDef<TData, boolean>
|
|
418
424
|
> {
|
|
419
|
-
return
|
|
425
|
+
return {
|
|
426
|
+
...props,
|
|
420
427
|
size: 50,
|
|
421
428
|
minSize: 50,
|
|
422
|
-
meta: { onUpdate, cell: { classNames: [textPadding, classNames] } },
|
|
429
|
+
meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
|
|
423
430
|
header: (column) => label ?? column.header.id,
|
|
424
431
|
cell: SwitchBuilderCell,
|
|
425
|
-
}
|
|
432
|
+
};
|
|
426
433
|
}
|
|
427
434
|
|
|
428
435
|
/**
|
|
@@ -431,7 +438,8 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
431
438
|
icon({ label, size, on, off, ...props }: IconColumnOptions<TData> = {}): Partial<ColumnDef<TData, boolean>> {
|
|
432
439
|
const IconOn = on?.Icon ?? Check;
|
|
433
440
|
const IconOff = off?.Icon ?? X;
|
|
434
|
-
return
|
|
441
|
+
return {
|
|
442
|
+
...props,
|
|
435
443
|
size: size ?? 32,
|
|
436
444
|
header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
|
|
437
445
|
cell: (cell) => {
|
|
@@ -444,6 +452,6 @@ export class ColumnBuilder<TData extends RowData> {
|
|
|
444
452
|
return null;
|
|
445
453
|
}
|
|
446
454
|
},
|
|
447
|
-
}
|
|
455
|
+
};
|
|
448
456
|
}
|
|
449
457
|
}
|
package/src/index.ts
CHANGED
package/src/theme.ts
CHANGED
|
@@ -4,7 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
import { type CellContext } from '@tanstack/react-table';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
chromeSurface,
|
|
9
|
+
fixedSurface,
|
|
10
|
+
focusRing,
|
|
11
|
+
ghostSelected,
|
|
12
|
+
ghostSelectedCurrent,
|
|
13
|
+
groupBorder,
|
|
14
|
+
mx,
|
|
15
|
+
} from '@dxos/react-ui-theme';
|
|
8
16
|
import { type ComponentFunction } from '@dxos/react-ui-types';
|
|
9
17
|
|
|
10
18
|
import { type TableContextValue, type TableFlags } from './components';
|
|
@@ -36,7 +44,7 @@ export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
|
|
|
36
44
|
export type TheadStyleProps = Partial<TableFlags>;
|
|
37
45
|
|
|
38
46
|
export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header }, ...etc) =>
|
|
39
|
-
mx(header ? 'sticky block-start-
|
|
47
|
+
mx(header ? 'sticky block-start-[--sticky-top] z-[1]' : 'collapse', header && fixedSurface, ...etc);
|
|
40
48
|
|
|
41
49
|
export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
|
|
42
50
|
|
|
@@ -65,13 +73,12 @@ export const theadResizeThumb: ComponentFunction<TheadStyleProps> = (_props, ...
|
|
|
65
73
|
export type TbodyStyleProps = Partial<TableContextValue<any>>;
|
|
66
74
|
export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
|
|
67
75
|
|
|
68
|
-
export type TbodyTrStyleProps = Partial<{
|
|
69
|
-
export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({
|
|
76
|
+
export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean }>;
|
|
77
|
+
export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent }, ...etc) =>
|
|
70
78
|
mx(
|
|
71
79
|
'group',
|
|
72
|
-
|
|
80
|
+
canBeCurrent ? ghostSelectedCurrent : ghostSelected,
|
|
73
81
|
canBeCurrent && focusRing,
|
|
74
|
-
canBeCurrent && hoverColors,
|
|
75
82
|
canBeCurrent && 'cursor-pointer rounded',
|
|
76
83
|
...etc,
|
|
77
84
|
);
|