@dxos/react-ui-table 0.3.8 → 0.3.9-main.03b62b6
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 +172 -148
- 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/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 +3 -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/schema.d.ts +0 -1
- package/dist/types/src/schema.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/dist/types/src/translations.d.ts +11 -0
- package/dist/types/src/translations.d.ts.map +1 -1
- package/package.json +10 -10
- package/src/components/ColumnMenu.tsx +16 -16
- package/src/components/Table/Table.tsx +6 -1
- package/src/components/Table/TableBody.tsx +2 -1
- package/src/components/Table/props.ts +5 -0
- package/src/helpers.tsx +105 -84
- package/src/index.ts +1 -0
- package/src/schema.ts +0 -8
- package/src/theme.ts +14 -7
- package/src/translations.ts +11 -0
|
@@ -70,11 +70,11 @@ export declare class ColumnBuilder<TData extends RowData> {
|
|
|
70
70
|
/**
|
|
71
71
|
* PublicKey with tooltip.
|
|
72
72
|
*/
|
|
73
|
-
key({ label, tooltip, ...props }?: KeyColumnOptions<TData>): Partial<ColumnDef<TData, PublicKey>>;
|
|
73
|
+
key({ label, tooltip, classNames, ...props }?: KeyColumnOptions<TData>): Partial<ColumnDef<TData, PublicKey>>;
|
|
74
74
|
/**
|
|
75
75
|
* Row selector
|
|
76
76
|
*/
|
|
77
|
-
selectRow({
|
|
77
|
+
selectRow({ classNames, onUpdate, id }?: SelectRowColumnOptions<TData>): Parameters<ColumnHelper<TData>['display']>[0];
|
|
78
78
|
/**
|
|
79
79
|
* Switch
|
|
80
80
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -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,
|
|
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"}
|
|
@@ -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,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"}
|
|
@@ -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
|
}[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC
|
|
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.
|
|
3
|
+
"version": "0.3.9-main.03b62b6",
|
|
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/
|
|
26
|
-
"@dxos/
|
|
27
|
-
"@dxos/
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/react-ui-theme": "0.3.
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
25
|
+
"@dxos/async": "0.3.9-main.03b62b6",
|
|
26
|
+
"@dxos/react-ui-searchlist": "0.3.9-main.03b62b6",
|
|
27
|
+
"@dxos/keys": "0.3.9-main.03b62b6",
|
|
28
|
+
"@dxos/react-ui": "0.3.9-main.03b62b6",
|
|
29
|
+
"@dxos/react-ui-theme": "0.3.9-main.03b62b6",
|
|
30
|
+
"@dxos/invariant": "0.3.9-main.03b62b6",
|
|
31
|
+
"@dxos/util": "0.3.9-main.03b62b6",
|
|
32
|
+
"@dxos/react-ui-types": "0.3.9-main.03b62b6"
|
|
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.03b62b6"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -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,
|
|
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
|
|
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-
|
|
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'>
|
|
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'>
|
|
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'>
|
|
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
|
-
{
|
|
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'>
|
|
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>
|
|
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>
|
|
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>
|
|
226
|
+
<span>{t('delete label')}</span>
|
|
227
227
|
<div className='grow' />
|
|
228
228
|
<Trash className={getSize(5)} />
|
|
229
229
|
</Button>
|
|
@@ -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<{
|
|
@@ -15,6 +17,7 @@ export type TableFlags = Partial<{
|
|
|
15
17
|
fullWidth: boolean;
|
|
16
18
|
debug: boolean;
|
|
17
19
|
expand: boolean;
|
|
20
|
+
stickyHeader: boolean;
|
|
18
21
|
rowsSelectable: boolean | 'multi';
|
|
19
22
|
}>;
|
|
20
23
|
|
|
@@ -41,6 +44,8 @@ export type TableProps<TData extends RowData> = TableFlags &
|
|
|
41
44
|
onRowSelectionChange: (rowSelection: RowSelectionState) => void;
|
|
42
45
|
// Derived from row selection
|
|
43
46
|
onDataSelectionChange: (dataSelection: TData[]) => void;
|
|
47
|
+
// `table` element props
|
|
48
|
+
classNames: ClassNameValue;
|
|
44
49
|
}>;
|
|
45
50
|
|
|
46
51
|
export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
|