boneless-table 0.1.1 → 0.1.2
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/README.md +22 -0
- package/dist/index.d.mts +21 -29
- package/dist/index.d.ts +21 -29
- package/dist/index.js +400 -226
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +400 -226
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,6 +41,28 @@ when `scroller="fill"`, which must be placed in a parent with a stable height. V
|
|
|
41
41
|
measured after rendering, so cells may wrap or render variable-height content. Use
|
|
42
42
|
`virtualization={false}` to opt out in a fill layout.
|
|
43
43
|
|
|
44
|
+
## Column sizing and resizing
|
|
45
|
+
|
|
46
|
+
Put layout decisions on the column that owns them. `widthPx` starts a column at a fixed width;
|
|
47
|
+
otherwise `minPx` and `flex` define its shared grid track. Set `resizable: true` to render a
|
|
48
|
+
resize handle. User resizing is local to the table instance and replaces that column's flex or
|
|
49
|
+
initial width until Reset is selected. `minPx` and `maxPx` bound the resulting width.
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
const columns = [
|
|
53
|
+
{
|
|
54
|
+
key: 'account',
|
|
55
|
+
header: 'Account',
|
|
56
|
+
meta: { bonelessTable: { sizing: { minPx: 180, flex: 2, resizable: true } } },
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
key: 'renewal',
|
|
60
|
+
header: 'Renewal',
|
|
61
|
+
meta: { bonelessTable: { sizing: { widthPx: 160, minPx: 120, maxPx: 240, resizable: true } } },
|
|
62
|
+
},
|
|
63
|
+
] satisfies BonelessTableColumn<Account>[]
|
|
64
|
+
```
|
|
65
|
+
|
|
44
66
|
For non-text column headers, set `meta.columnLabel` to provide the label shown in the built-in
|
|
45
67
|
column chooser; otherwise the chooser falls back to the column id.
|
|
46
68
|
|
package/dist/index.d.mts
CHANGED
|
@@ -7,11 +7,17 @@ type ColumnAlignment = 'left' | 'right';
|
|
|
7
7
|
type ColumnBorders = 'none' | 'left' | 'right' | 'both';
|
|
8
8
|
type FilterType = 'text' | 'select';
|
|
9
9
|
type RevealMode = 'always' | 'hover';
|
|
10
|
+
/**
|
|
11
|
+
* Column layout belongs with the column definition. A width is the column's initial fixed width;
|
|
12
|
+
* a flex value shares remaining space until the user resizes that column. `resizable` is opt-in
|
|
13
|
+
* so existing unstyled tables do not gain controls unexpectedly.
|
|
14
|
+
*/
|
|
10
15
|
type BonelessTableColumnSizing = {
|
|
11
|
-
widthPx
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
widthPx?: number;
|
|
17
|
+
minPx?: number;
|
|
18
|
+
maxPx?: number;
|
|
14
19
|
flex?: number;
|
|
20
|
+
resizable?: boolean;
|
|
15
21
|
};
|
|
16
22
|
type BonelessTableColumnSettings = {
|
|
17
23
|
sizing?: BonelessTableColumnSizing;
|
|
@@ -30,9 +36,17 @@ type BonelessTableColumnSettings = {
|
|
|
30
36
|
suffix?: string;
|
|
31
37
|
};
|
|
32
38
|
};
|
|
39
|
+
type ResolvedBonelessTableColumnSettings = {
|
|
40
|
+
sizing: BonelessTableColumnSizing;
|
|
41
|
+
align: ColumnAlignment;
|
|
42
|
+
borders: ColumnBorders;
|
|
43
|
+
sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
|
|
44
|
+
filtering: BonelessTableColumnSettings['filtering'];
|
|
45
|
+
valueDisplay: BonelessTableColumnSettings['valueDisplay'];
|
|
46
|
+
};
|
|
33
47
|
type BonelessTableSettings = {
|
|
34
48
|
columnDefaults: Required<Pick<BonelessTableColumnSettings, 'align' | 'borders'>> & {
|
|
35
|
-
sizing: Required<
|
|
49
|
+
sizing: Required<Pick<BonelessTableColumnSizing, 'minPx' | 'flex'>>;
|
|
36
50
|
sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
|
|
37
51
|
};
|
|
38
52
|
interactions: {
|
|
@@ -47,30 +61,7 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
|
|
|
47
61
|
bonelessTable?: BonelessTableColumnSettings;
|
|
48
62
|
};
|
|
49
63
|
};
|
|
50
|
-
}):
|
|
51
|
-
sizing: {
|
|
52
|
-
minPx?: number | undefined;
|
|
53
|
-
flex?: number;
|
|
54
|
-
widthPx: number;
|
|
55
|
-
} | {
|
|
56
|
-
minPx: number;
|
|
57
|
-
flex: number;
|
|
58
|
-
};
|
|
59
|
-
align: ColumnAlignment;
|
|
60
|
-
borders: ColumnBorders;
|
|
61
|
-
sorting: {
|
|
62
|
-
enabled: boolean;
|
|
63
|
-
reveal: RevealMode;
|
|
64
|
-
};
|
|
65
|
-
filtering: {
|
|
66
|
-
type: FilterType;
|
|
67
|
-
options?: readonly string[];
|
|
68
|
-
} | undefined;
|
|
69
|
-
valueDisplay: {
|
|
70
|
-
truncateAt: number;
|
|
71
|
-
suffix?: string;
|
|
72
|
-
} | undefined;
|
|
73
|
-
};
|
|
64
|
+
}): ResolvedBonelessTableColumnSettings;
|
|
74
65
|
declare function compactValue(value: unknown, settings?: BonelessTableColumnSettings): string;
|
|
75
66
|
|
|
76
67
|
declare module '@tanstack/react-table' {
|
|
@@ -155,6 +146,7 @@ type BonelessTableClassNames = Partial<{
|
|
|
155
146
|
header: string;
|
|
156
147
|
headerButton: string;
|
|
157
148
|
headerLabel: string;
|
|
149
|
+
resizeHandle: string;
|
|
158
150
|
sortIndicator: string;
|
|
159
151
|
filters: string;
|
|
160
152
|
filterItem: string;
|
|
@@ -264,4 +256,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
|
|
|
264
256
|
classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
|
|
265
257
|
}): react.JSX.Element;
|
|
266
258
|
|
|
267
|
-
export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
|
|
259
|
+
export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableColumnSizing, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type ResolvedBonelessTableColumnSettings, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,11 +7,17 @@ type ColumnAlignment = 'left' | 'right';
|
|
|
7
7
|
type ColumnBorders = 'none' | 'left' | 'right' | 'both';
|
|
8
8
|
type FilterType = 'text' | 'select';
|
|
9
9
|
type RevealMode = 'always' | 'hover';
|
|
10
|
+
/**
|
|
11
|
+
* Column layout belongs with the column definition. A width is the column's initial fixed width;
|
|
12
|
+
* a flex value shares remaining space until the user resizes that column. `resizable` is opt-in
|
|
13
|
+
* so existing unstyled tables do not gain controls unexpectedly.
|
|
14
|
+
*/
|
|
10
15
|
type BonelessTableColumnSizing = {
|
|
11
|
-
widthPx
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
widthPx?: number;
|
|
17
|
+
minPx?: number;
|
|
18
|
+
maxPx?: number;
|
|
14
19
|
flex?: number;
|
|
20
|
+
resizable?: boolean;
|
|
15
21
|
};
|
|
16
22
|
type BonelessTableColumnSettings = {
|
|
17
23
|
sizing?: BonelessTableColumnSizing;
|
|
@@ -30,9 +36,17 @@ type BonelessTableColumnSettings = {
|
|
|
30
36
|
suffix?: string;
|
|
31
37
|
};
|
|
32
38
|
};
|
|
39
|
+
type ResolvedBonelessTableColumnSettings = {
|
|
40
|
+
sizing: BonelessTableColumnSizing;
|
|
41
|
+
align: ColumnAlignment;
|
|
42
|
+
borders: ColumnBorders;
|
|
43
|
+
sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
|
|
44
|
+
filtering: BonelessTableColumnSettings['filtering'];
|
|
45
|
+
valueDisplay: BonelessTableColumnSettings['valueDisplay'];
|
|
46
|
+
};
|
|
33
47
|
type BonelessTableSettings = {
|
|
34
48
|
columnDefaults: Required<Pick<BonelessTableColumnSettings, 'align' | 'borders'>> & {
|
|
35
|
-
sizing: Required<
|
|
49
|
+
sizing: Required<Pick<BonelessTableColumnSizing, 'minPx' | 'flex'>>;
|
|
36
50
|
sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
|
|
37
51
|
};
|
|
38
52
|
interactions: {
|
|
@@ -47,30 +61,7 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
|
|
|
47
61
|
bonelessTable?: BonelessTableColumnSettings;
|
|
48
62
|
};
|
|
49
63
|
};
|
|
50
|
-
}):
|
|
51
|
-
sizing: {
|
|
52
|
-
minPx?: number | undefined;
|
|
53
|
-
flex?: number;
|
|
54
|
-
widthPx: number;
|
|
55
|
-
} | {
|
|
56
|
-
minPx: number;
|
|
57
|
-
flex: number;
|
|
58
|
-
};
|
|
59
|
-
align: ColumnAlignment;
|
|
60
|
-
borders: ColumnBorders;
|
|
61
|
-
sorting: {
|
|
62
|
-
enabled: boolean;
|
|
63
|
-
reveal: RevealMode;
|
|
64
|
-
};
|
|
65
|
-
filtering: {
|
|
66
|
-
type: FilterType;
|
|
67
|
-
options?: readonly string[];
|
|
68
|
-
} | undefined;
|
|
69
|
-
valueDisplay: {
|
|
70
|
-
truncateAt: number;
|
|
71
|
-
suffix?: string;
|
|
72
|
-
} | undefined;
|
|
73
|
-
};
|
|
64
|
+
}): ResolvedBonelessTableColumnSettings;
|
|
74
65
|
declare function compactValue(value: unknown, settings?: BonelessTableColumnSettings): string;
|
|
75
66
|
|
|
76
67
|
declare module '@tanstack/react-table' {
|
|
@@ -155,6 +146,7 @@ type BonelessTableClassNames = Partial<{
|
|
|
155
146
|
header: string;
|
|
156
147
|
headerButton: string;
|
|
157
148
|
headerLabel: string;
|
|
149
|
+
resizeHandle: string;
|
|
158
150
|
sortIndicator: string;
|
|
159
151
|
filters: string;
|
|
160
152
|
filterItem: string;
|
|
@@ -264,4 +256,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
|
|
|
264
256
|
classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
|
|
265
257
|
}): react.JSX.Element;
|
|
266
258
|
|
|
267
|
-
export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
|
|
259
|
+
export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableColumnSizing, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type ResolvedBonelessTableColumnSettings, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
|