@rttui/skin-anocca 1.0.17 → 1.0.18
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/cjs/package.json +1 -1
- package/dist/cjs/stories/ReactTanstackTableUiStory.stories.cjs +43 -1
- package/dist/cjs/stories/ReactTanstackTableUiStory.stories.cjs.map +3 -3
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs +42 -3
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs.map +3 -3
- package/dist/mjs/package.json +1 -1
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs +43 -1
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs.map +3 -3
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs +49 -4
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs.map +3 -3
- package/dist/types/stories/ReactTanstackTableUiStory.stories.d.ts +6 -0
- package/dist/types/stories/ReactTanstackTableUiStoryComponent.d.ts +2 -0
- package/package.json +2 -2
package/dist/cjs/package.json
CHANGED
|
@@ -35,6 +35,10 @@ __export(exports_ReactTanstackTableUiStory_stories, {
|
|
|
35
35
|
PinRelativeToTable: () => PinRelativeToTable,
|
|
36
36
|
PinRelativeToCols: () => PinRelativeToCols,
|
|
37
37
|
FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: () => FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth,
|
|
38
|
+
FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName: () => FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName,
|
|
39
|
+
FillAvailableSpaceAfterCrushWithTwoHeaderRows: () => FillAvailableSpaceAfterCrushWithTwoHeaderRows,
|
|
40
|
+
FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName: () => FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName,
|
|
41
|
+
FillAvailableSpaceAfterCrushWithHeaderGroups: () => FillAvailableSpaceAfterCrushWithHeaderGroups,
|
|
38
42
|
FillAvailableSpaceAfterCrushExceptName: () => FillAvailableSpaceAfterCrushExceptName,
|
|
39
43
|
FillAvailableSpaceAfterCrush: () => FillAvailableSpaceAfterCrush,
|
|
40
44
|
CanPinRowsRelativeToTable: () => CanPinRowsRelativeToTable,
|
|
@@ -179,6 +183,44 @@ var FillAvailableSpaceAfterCrushExceptName = {
|
|
|
179
183
|
}
|
|
180
184
|
}
|
|
181
185
|
};
|
|
186
|
+
var FillAvailableSpaceAfterCrushWithTwoHeaderRows = {
|
|
187
|
+
args: {
|
|
188
|
+
autoCrushColumns: true,
|
|
189
|
+
fillAvailableSpaceAfterCrush: true,
|
|
190
|
+
withTwoHeaderRows: true
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
var FillAvailableSpaceAfterCrushWithHeaderGroups = {
|
|
194
|
+
args: {
|
|
195
|
+
autoCrushColumns: true,
|
|
196
|
+
fillAvailableSpaceAfterCrush: true,
|
|
197
|
+
withHeaderGroups: true
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
var FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName = {
|
|
201
|
+
args: {
|
|
202
|
+
autoCrushColumns: true,
|
|
203
|
+
fillAvailableSpaceAfterCrush: true,
|
|
204
|
+
withHeaderGroups: true,
|
|
205
|
+
meta: {
|
|
206
|
+
name: {
|
|
207
|
+
fillAvailableSpaceAfterCrush: false
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
var FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName = {
|
|
213
|
+
args: {
|
|
214
|
+
autoCrushColumns: true,
|
|
215
|
+
fillAvailableSpaceAfterCrush: true,
|
|
216
|
+
withTwoHeaderRows: true,
|
|
217
|
+
meta: {
|
|
218
|
+
name: {
|
|
219
|
+
fillAvailableSpaceAfterCrush: false
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
};
|
|
182
224
|
var FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth = {
|
|
183
225
|
args: {
|
|
184
226
|
autoCrushColumns: true,
|
|
@@ -231,4 +273,4 @@ var SizeByLargestHeaderWithMeta = {
|
|
|
231
273
|
}
|
|
232
274
|
};
|
|
233
275
|
|
|
234
|
-
//# debugId=
|
|
276
|
+
//# debugId=A042BD6B403A4BB064756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStory.stories.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { getCoreRowModel } from \"@tanstack/react-table\";\nimport { AnoccaSkin } from \"..\";\nimport { ReactTanstackTableUi } from \"./ReactTanstackTableUiStoryComponent.cjs\";\nimport { createSourceCode } from \"./createSourceCode.cjs\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n title: \"ReactTanstackTableUi\",\n component: ReactTanstackTableUi,\n parameters: {\n // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n layout: \"centered\",\n },\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n data: { control: \"select\" },\n columns: { control: \"select\" },\n pinColsRelativeTo: { control: \"select\", options: [\"cols\", \"table\"] },\n skin: {\n control: \"object\",\n table: { disable: true },\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: {\n width: 600,\n height: 400,\n skin: AnoccaSkin,\n autoCrushColumns: false,\n data: \"big\",\n columns: \"few\",\n getCoreRowModel: getCoreRowModel(),\n pinColsRelativeTo: \"cols\",\n fillAvailableSpaceAfterCrush: false,\n scrollbarWidth: 16,\n getRowId: (row) => row.id,\n },\n} satisfies Meta<typeof ReactTanstackTableUi>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n args: {\n enableColumnPinning: true,\n autoCrushColumns: false,\n fillAvailableSpaceAfterCrush: false,\n pinColsRelativeTo: \"cols\",\n },\n parameters: {\n docs: {\n source: { language: \"tsx\", code: createSourceCode() },\n },\n },\n};\n\nexport const AutoCrushColumns: Story = {\n args: {\n autoCrushColumns: true,\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({ props: \" autoCrushColumns\" }),\n },\n },\n },\n};\n\nexport const AutoCrushColumnsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n enableColumnPinning: true,\n meta: {\n name: {\n autoCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\",\n nameMeta: \" autoCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const PinRelativeToCols: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"cols\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const PinRelativeToTable: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"table\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrush: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n },\n};\n\nexport const FillAvailableSpaceAfterCrushExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\\n fillAvailableSpaceAfterCrush\",\n nameMeta: \" fillAvailableSpaceAfterCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =\n {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n },\n };\n\nexport const CanPinRowsRelativeToRows: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"rows\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const CanPinRowsRelativeToTable: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"table\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const SizeByLargestHeader: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"cell\",\n },\n};\n\nexport const SizeByLargestHeaderWithMeta: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"header\",\n enableColumnPinning: true,\n meta: {\n age: {\n crushMinSizeBy: 'cell',\n },\n },\n },\n};\n"
|
|
5
|
+
"import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { getCoreRowModel } from \"@tanstack/react-table\";\nimport { AnoccaSkin } from \"..\";\nimport { ReactTanstackTableUi } from \"./ReactTanstackTableUiStoryComponent.cjs\";\nimport { createSourceCode } from \"./createSourceCode.cjs\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n title: \"ReactTanstackTableUi\",\n component: ReactTanstackTableUi,\n parameters: {\n // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n layout: \"centered\",\n },\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n data: { control: \"select\" },\n columns: { control: \"select\" },\n pinColsRelativeTo: { control: \"select\", options: [\"cols\", \"table\"] },\n skin: {\n control: \"object\",\n table: { disable: true },\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: {\n width: 600,\n height: 400,\n skin: AnoccaSkin,\n autoCrushColumns: false,\n data: \"big\",\n columns: \"few\",\n getCoreRowModel: getCoreRowModel(),\n pinColsRelativeTo: \"cols\",\n fillAvailableSpaceAfterCrush: false,\n scrollbarWidth: 16,\n getRowId: (row) => row.id,\n },\n} satisfies Meta<typeof ReactTanstackTableUi>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n args: {\n enableColumnPinning: true,\n autoCrushColumns: false,\n fillAvailableSpaceAfterCrush: false,\n pinColsRelativeTo: \"cols\",\n },\n parameters: {\n docs: {\n source: { language: \"tsx\", code: createSourceCode() },\n },\n },\n};\n\nexport const AutoCrushColumns: Story = {\n args: {\n autoCrushColumns: true,\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({ props: \" autoCrushColumns\" }),\n },\n },\n },\n};\n\nexport const AutoCrushColumnsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n enableColumnPinning: true,\n meta: {\n name: {\n autoCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\",\n nameMeta: \" autoCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const PinRelativeToCols: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"cols\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const PinRelativeToTable: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"table\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrush: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n },\n};\n\nexport const FillAvailableSpaceAfterCrushExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\\n fillAvailableSpaceAfterCrush\",\n nameMeta: \" fillAvailableSpaceAfterCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithTwoHeaderRows: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withTwoHeaderRows: true,\n },\n};\nexport const FillAvailableSpaceAfterCrushWithHeaderGroups: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withHeaderGroups: true,\n },\n};\nexport const FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withHeaderGroups: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withTwoHeaderRows: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n};\n\n\nexport const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =\n {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n },\n };\n\nexport const CanPinRowsRelativeToRows: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"rows\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const CanPinRowsRelativeToTable: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"table\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const SizeByLargestHeader: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"cell\",\n },\n};\n\nexport const SizeByLargestHeaderWithMeta: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"header\",\n enableColumnPinning: true,\n meta: {\n age: {\n crushMinSizeBy: 'cell',\n },\n },\n },\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "A042BD6B403A4BB064756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -80,6 +80,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
80
80
|
});
|
|
81
81
|
const fewColumns = [
|
|
82
82
|
columnHelper.accessor("name", {
|
|
83
|
+
id: "name",
|
|
83
84
|
header: "Name",
|
|
84
85
|
cell: (info) => /* @__PURE__ */ jsx_runtime.jsxs(import_material.Box, {
|
|
85
86
|
sx: { display: "flex", gap: 2, flex: 1 },
|
|
@@ -99,6 +100,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
99
100
|
meta: props.meta?.["name"]
|
|
100
101
|
}),
|
|
101
102
|
columnHelper.accessor("age", {
|
|
103
|
+
id: "age",
|
|
102
104
|
header: "Age",
|
|
103
105
|
meta: props.meta?.["age"],
|
|
104
106
|
cell: (info) => /* @__PURE__ */ jsx_runtime.jsx(import_material.Typography, {
|
|
@@ -108,6 +110,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
108
110
|
size: 50
|
|
109
111
|
}),
|
|
110
112
|
columnHelper.accessor("city", {
|
|
113
|
+
id: "city",
|
|
111
114
|
header: "City",
|
|
112
115
|
meta: props.meta?.["city"],
|
|
113
116
|
cell: (info) => /* @__PURE__ */ jsx_runtime.jsx(import_material.Typography, {
|
|
@@ -119,6 +122,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
119
122
|
const manyColumns = [
|
|
120
123
|
...fewColumns,
|
|
121
124
|
...Array.from({ length: 100 }, (_, i) => columnHelper.accessor(`col${i}`, {
|
|
125
|
+
id: `col${i}`,
|
|
122
126
|
header: `Column ${i}`,
|
|
123
127
|
cell: (info) => /* @__PURE__ */ jsx_runtime.jsx(import_material.Typography, {
|
|
124
128
|
variant: "body2",
|
|
@@ -126,8 +130,43 @@ var ReactTanstackTableUi = (props) => {
|
|
|
126
130
|
})
|
|
127
131
|
}))
|
|
128
132
|
];
|
|
129
|
-
|
|
130
|
-
|
|
133
|
+
const cols = props.columns === "few" ? fewColumns : manyColumns;
|
|
134
|
+
if (props.withHeaderGroups) {
|
|
135
|
+
cols.splice(0, 2, columnHelper.group({
|
|
136
|
+
id: `personal-info`,
|
|
137
|
+
header: "Personal Info",
|
|
138
|
+
columns: cols.slice(0, 2)
|
|
139
|
+
}));
|
|
140
|
+
}
|
|
141
|
+
if (props.withTwoHeaderRows) {
|
|
142
|
+
return cols.map((col) => {
|
|
143
|
+
const newCol = col.id ? {
|
|
144
|
+
...col,
|
|
145
|
+
id: col.id,
|
|
146
|
+
header: () => /* @__PURE__ */ jsx_runtime.jsx(import_material.TextField, {
|
|
147
|
+
placeholder: "Search...",
|
|
148
|
+
slotProps: {
|
|
149
|
+
input: { sx: { height: "20px", width: "150px" } }
|
|
150
|
+
}
|
|
151
|
+
})
|
|
152
|
+
} : undefined;
|
|
153
|
+
const subColumns = newCol ? [newCol] : [];
|
|
154
|
+
return columnHelper.group({
|
|
155
|
+
id: `group-${col.id}`,
|
|
156
|
+
header: col.header,
|
|
157
|
+
columns: subColumns
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
return cols;
|
|
162
|
+
}, [
|
|
163
|
+
props.columns,
|
|
164
|
+
props.enableColumnPinning,
|
|
165
|
+
props.enableRowPinning,
|
|
166
|
+
props.meta,
|
|
167
|
+
props.withTwoHeaderRows,
|
|
168
|
+
props.withHeaderGroups
|
|
169
|
+
]);
|
|
131
170
|
const table = import_react_table.useReactTable({
|
|
132
171
|
...props,
|
|
133
172
|
data,
|
|
@@ -144,4 +183,4 @@ var ReactTanstackTableUi = (props) => {
|
|
|
144
183
|
});
|
|
145
184
|
};
|
|
146
185
|
|
|
147
|
-
//# debugId=
|
|
186
|
+
//# debugId=AC0B6532447E0C0564756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStoryComponent.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import {
|
|
5
|
+
"import {\n Box,\n ScopedCssBaseline,\n TextField,\n ThemeProvider,\n Typography,\n} from \"@mui/material\";\nimport { useTheme } from \"@mui/material/styles\";\nimport {\n decorateColumnHelper,\n ReactTanstackTableUi as TableComponent,\n} from \"@rttui/core\";\nimport {\n ColumnDef,\n ColumnMeta,\n createColumnHelper,\n Table,\n TableOptions,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport { HeaderPinButtons } from \"../HeaderPinButtons.cjs\";\nimport React from \"react\";\nimport { RowPinButtons } from \"../RowPinButtons.cjs\";\ntype Person = {\n id: string;\n name: string;\n age: number;\n city: string;\n} & Record<`col${number}`, string>;\n\nconst smallData: Person[] = [\n { id: \"1\", name: \"John\", age: 20, city: \"New York\" },\n { id: \"2\", name: \"Jane\", age: 21, city: \"Los Angeles\" },\n { id: \"3\", name: \"Jim\", age: 22, city: \"Chicago\" },\n];\n\nconst bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({\n id: i.toString(),\n name: `Person ${i}`,\n age: 20 + i,\n city: `City ${i}`,\n ...Object.fromEntries(\n Array.from({ length: 100 }, (_, j) => [`col${j}`, `Value ${i}-${j}`]),\n ),\n}));\n\nexport const ReactTanstackTableUi = (\n props: {\n data: \"big\" | \"small\";\n columns: \"many\" | \"few\";\n meta?: Record<string, ColumnMeta<Person, string>>;\n withTwoHeaderRows?: boolean;\n withHeaderGroups?: boolean;\n } & Omit<TableOptions<Person>, \"data\" | \"columns\"> &\n Omit<React.ComponentProps<typeof TableComponent>, \"table\">,\n) => {\n const theme = useTheme();\n const data: Person[] = props.data === \"big\" ? bigData : smallData;\n\n const columns: ColumnDef<Person>[] = React.useMemo(() => {\n const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {\n header: (original) => (\n <Box sx={{ display: \"flex\", gap: 2 }}>\n {original}\n {props.enableColumnPinning && <HeaderPinButtons />}\n </Box>\n ),\n });\n\n const fewColumns: ColumnDef<Person>[] = [\n columnHelper.accessor(\"name\", {\n id: \"name\",\n header: \"Name\",\n cell: (info) => (\n <Box sx={{ display: \"flex\", gap: 2, flex: 1 }}>\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n {props.enableRowPinning && <Box sx={{ flexGrow: 1 }} />}\n {props.enableRowPinning && <RowPinButtons row={info.row} />}\n </Box>\n ),\n meta: props.meta?.[\"name\"],\n }),\n columnHelper.accessor(\"age\", {\n id: \"age\",\n header: \"Age\",\n meta: props.meta?.[\"age\"],\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n size: 50,\n }),\n columnHelper.accessor(\"city\", {\n id: \"city\",\n header: \"City\",\n meta: props.meta?.[\"city\"],\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n }),\n ];\n\n const manyColumns: ColumnDef<Person>[] = [\n ...fewColumns,\n ...Array.from({ length: 100 }, (_, i) =>\n columnHelper.accessor(`col${i}`, {\n id: `col${i}`,\n header: `Column ${i}`,\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n }),\n ),\n ];\n\n const cols = props.columns === \"few\" ? fewColumns : manyColumns;\n\n if (props.withHeaderGroups) {\n cols.splice(\n 0,\n 2,\n columnHelper.group({\n id: `personal-info`,\n header: \"Personal Info\",\n columns: cols.slice(0, 2),\n }),\n );\n }\n\n if (props.withTwoHeaderRows) {\n return cols.map((col) => {\n const newCol: ColumnDef<Person> | undefined = col.id\n ? {\n ...col,\n id: col.id,\n header: () => (\n <TextField\n placeholder=\"Search...\"\n slotProps={{\n input: { sx: { height: \"20px\", width: \"150px\" } },\n }}\n />\n ),\n }\n : undefined;\n const subColumns: ColumnDef<Person>[] = newCol ? [newCol] : [];\n return columnHelper.group({\n id: `group-${col.id}`,\n header: col.header,\n columns: subColumns,\n });\n });\n }\n return cols;\n }, [\n props.columns,\n props.enableColumnPinning,\n props.enableRowPinning,\n props.meta,\n props.withTwoHeaderRows,\n props.withHeaderGroups,\n ]);\n\n const table = useReactTable({\n ...props,\n data,\n columns,\n });\n\n return (\n <ScopedCssBaseline>\n <ThemeProvider theme={theme}>\n <TableComponent {...props} table={table as Table<unknown>} />\n </ThemeProvider>\n </ScopedCssBaseline>\n );\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IANP;AAOyB,IAAzB;AAIO,IAHP;AAWO,IAPP;AAQiC,IAAjC;AACkB,IAAlB;AAC8B,IAA9B;AAAA;AAQA,IAAM,YAAsB;AAAA,EAC1B,EAAE,IAAI,KAAK,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW;AAAA,EACnD,EAAE,IAAI,KAAK,MAAM,QAAQ,KAAK,IAAI,MAAM,cAAc;AAAA,EACtD,EAAE,IAAI,KAAK,MAAM,OAAO,KAAK,IAAI,MAAM,UAAU;AACnD;AAEA,IAAM,UAAoB,MAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,OAAO;AAAA,EAChE,IAAI,EAAE,SAAS;AAAA,EACf,MAAM,UAAU;AAAA,EAChB,KAAK,KAAK;AAAA,EACV,MAAM,QAAQ;AAAA,KACX,OAAO,YACR,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,CAAC,IAAG,MAAM,CAAC,MAAM,KAAK,SAAS,KAAK,GAAG,CAAC,CACtE;AACF,EAAE;AAEK,IAAM,uBAAuB,CAClC,UAQG;AAAA,EACH,MAAM,QAAQ,uBAAS;AAAA,EACvB,MAAM,OAAiB,MAAM,SAAS,QAAQ,UAAU;AAAA,EAExD,MAAM,UAA+B,qBAAM,QAAQ,MAAM;AAAA,IACvD,MAAM,eAAe,iCAAqB,sCAA2B,GAAG;AAAA,MACtE,QAAQ,CAAC,6BACP,iBAGE,qBAHF;AAAA,QAAK,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE;AAAA,QAAnC,UAGE;AAAA,UAFC;AAAA,UACA,MAAM,uCAAuB,gBAAC,0CAAD,EAAkB;AAAA;AAAA,OAChD;AAAA,IAEN,CAAC;AAAA,IAED,MAAM,aAAkC;AAAA,MACtC,aAAa,SAAS,QAAQ;AAAA,QAC5B,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM,CAAC,yBACL,iBAIE,qBAJF;AAAA,UAAK,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,MAAM,EAAE;AAAA,UAA5C,UAIE;AAAA,4BAHA,gBAA+C,4BAA/C;AAAA,cAAY,SAAQ;AAAA,cAApB,UAA6B,KAAK,SAAS;AAAA,aAAI;AAAA,YAC9C,MAAM,oCAAoB,gBAAC,qBAAD;AAAA,cAAK,IAAI,EAAE,UAAU,EAAE;AAAA,aAAG;AAAA,YACpD,MAAM,oCAAoB,gBAAC,oCAAD;AAAA,cAAe,KAAK,KAAK;AAAA,aAAK;AAAA;AAAA,SACzD;AAAA,QAEJ,MAAM,MAAM,OAAO;AAAA,MACrB,CAAC;AAAA,MACD,aAAa,SAAS,OAAO;AAAA,QAC3B,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM,MAAM,OAAO;AAAA,QACnB,MAAM,CAAC,yBACL,gBAA+C,4BAA/C;AAAA,UAAY,SAAQ;AAAA,UAApB,UAA6B,KAAK,SAAS;AAAA,SAAI;AAAA,QAEjD,MAAM;AAAA,MACR,CAAC;AAAA,MACD,aAAa,SAAS,QAAQ;AAAA,QAC5B,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM,MAAM,OAAO;AAAA,QACnB,MAAM,CAAC,yBACL,gBAA+C,4BAA/C;AAAA,UAAY,SAAQ;AAAA,UAApB,UAA6B,KAAK,SAAS;AAAA,SAAI;AAAA,MAEnD,CAAC;AAAA,IACH;AAAA,IAEA,MAAM,cAAmC;AAAA,MACvC,GAAG;AAAA,MACH,GAAG,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,CAAC,GAAG,MACjC,aAAa,SAAS,MAAM,KAAK;AAAA,QAC/B,IAAI,MAAM;AAAA,QACV,QAAQ,UAAU;AAAA,QAClB,MAAM,CAAC,yBACL,gBAA+C,4BAA/C;AAAA,UAAY,SAAQ;AAAA,UAApB,UAA6B,KAAK,SAAS;AAAA,SAAI;AAAA,MAEnD,CAAC,CACH;AAAA,IACF;AAAA,IAEA,MAAM,OAAO,MAAM,YAAY,QAAQ,aAAa;AAAA,IAEpD,IAAI,MAAM,kBAAkB;AAAA,MAC1B,KAAK,OACH,GACA,GACA,aAAa,MAAM;AAAA,QACjB,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,SAAS,KAAK,MAAM,GAAG,CAAC;AAAA,MAC1B,CAAC,CACH;AAAA,IACF;AAAA,IAEA,IAAI,MAAM,mBAAmB;AAAA,MAC3B,OAAO,KAAK,IAAI,CAAC,QAAQ;AAAA,QACvB,MAAM,SAAwC,IAAI,KAC9C;AAAA,aACK;AAAA,UACH,IAAI,IAAI;AAAA,UACR,QAAQ,sBACN,gBAAC,2BAAD;AAAA,YACE,aAAY;AAAA,YACZ,WAAW;AAAA,cACT,OAAO,EAAE,IAAI,EAAE,QAAQ,QAAQ,OAAO,QAAQ,EAAE;AAAA,YAClD;AAAA,WACF;AAAA,QAEJ,IACA;AAAA,QACJ,MAAM,aAAkC,SAAS,CAAC,MAAM,IAAI,CAAC;AAAA,QAC7D,OAAO,aAAa,MAAM;AAAA,UACxB,IAAI,SAAS,IAAI;AAAA,UACjB,QAAQ,IAAI;AAAA,UACZ,SAAS;AAAA,QACX,CAAC;AAAA,OACF;AAAA,IACH;AAAA,IACA,OAAO;AAAA,KACN;AAAA,IACD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR,CAAC;AAAA,EAED,MAAM,QAAQ,iCAAc;AAAA,OACvB;AAAA,IACH;AAAA,IACA;AAAA,EACF,CAAC;AAAA,EAED,uBACE,gBAIE,mCAJF;AAAA,8BACE,gBAEE,+BAFF;AAAA,MAAe;AAAA,MAAf,0BACE,gBAAC,kCAAD;AAAA,WAAoB;AAAA,QAAO;AAAA,OAAgC;AAAA,KAC3D;AAAA,GACF;AAAA;",
|
|
8
|
+
"debugId": "AC0B6532447E0C0564756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/mjs/package.json
CHANGED
|
@@ -134,6 +134,44 @@ var FillAvailableSpaceAfterCrushExceptName = {
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
};
|
|
137
|
+
var FillAvailableSpaceAfterCrushWithTwoHeaderRows = {
|
|
138
|
+
args: {
|
|
139
|
+
autoCrushColumns: true,
|
|
140
|
+
fillAvailableSpaceAfterCrush: true,
|
|
141
|
+
withTwoHeaderRows: true
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
var FillAvailableSpaceAfterCrushWithHeaderGroups = {
|
|
145
|
+
args: {
|
|
146
|
+
autoCrushColumns: true,
|
|
147
|
+
fillAvailableSpaceAfterCrush: true,
|
|
148
|
+
withHeaderGroups: true
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
var FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName = {
|
|
152
|
+
args: {
|
|
153
|
+
autoCrushColumns: true,
|
|
154
|
+
fillAvailableSpaceAfterCrush: true,
|
|
155
|
+
withHeaderGroups: true,
|
|
156
|
+
meta: {
|
|
157
|
+
name: {
|
|
158
|
+
fillAvailableSpaceAfterCrush: false
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
var FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName = {
|
|
164
|
+
args: {
|
|
165
|
+
autoCrushColumns: true,
|
|
166
|
+
fillAvailableSpaceAfterCrush: true,
|
|
167
|
+
withTwoHeaderRows: true,
|
|
168
|
+
meta: {
|
|
169
|
+
name: {
|
|
170
|
+
fillAvailableSpaceAfterCrush: false
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
};
|
|
137
175
|
var FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth = {
|
|
138
176
|
args: {
|
|
139
177
|
autoCrushColumns: true,
|
|
@@ -192,6 +230,10 @@ export {
|
|
|
192
230
|
PinRelativeToTable,
|
|
193
231
|
PinRelativeToCols,
|
|
194
232
|
FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth,
|
|
233
|
+
FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName,
|
|
234
|
+
FillAvailableSpaceAfterCrushWithTwoHeaderRows,
|
|
235
|
+
FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName,
|
|
236
|
+
FillAvailableSpaceAfterCrushWithHeaderGroups,
|
|
195
237
|
FillAvailableSpaceAfterCrushExceptName,
|
|
196
238
|
FillAvailableSpaceAfterCrush,
|
|
197
239
|
CanPinRowsRelativeToTable,
|
|
@@ -201,4 +243,4 @@ export {
|
|
|
201
243
|
AutoCrushColumns
|
|
202
244
|
};
|
|
203
245
|
|
|
204
|
-
//# debugId=
|
|
246
|
+
//# debugId=52C942491A55526164756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStory.stories.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { getCoreRowModel } from \"@tanstack/react-table\";\nimport { AnoccaSkin } from \"..\";\nimport { ReactTanstackTableUi } from \"./ReactTanstackTableUiStoryComponent.mjs\";\nimport { createSourceCode } from \"./createSourceCode.mjs\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n title: \"ReactTanstackTableUi\",\n component: ReactTanstackTableUi,\n parameters: {\n // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n layout: \"centered\",\n },\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n data: { control: \"select\" },\n columns: { control: \"select\" },\n pinColsRelativeTo: { control: \"select\", options: [\"cols\", \"table\"] },\n skin: {\n control: \"object\",\n table: { disable: true },\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: {\n width: 600,\n height: 400,\n skin: AnoccaSkin,\n autoCrushColumns: false,\n data: \"big\",\n columns: \"few\",\n getCoreRowModel: getCoreRowModel(),\n pinColsRelativeTo: \"cols\",\n fillAvailableSpaceAfterCrush: false,\n scrollbarWidth: 16,\n getRowId: (row) => row.id,\n },\n} satisfies Meta<typeof ReactTanstackTableUi>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n args: {\n enableColumnPinning: true,\n autoCrushColumns: false,\n fillAvailableSpaceAfterCrush: false,\n pinColsRelativeTo: \"cols\",\n },\n parameters: {\n docs: {\n source: { language: \"tsx\", code: createSourceCode() },\n },\n },\n};\n\nexport const AutoCrushColumns: Story = {\n args: {\n autoCrushColumns: true,\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({ props: \" autoCrushColumns\" }),\n },\n },\n },\n};\n\nexport const AutoCrushColumnsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n enableColumnPinning: true,\n meta: {\n name: {\n autoCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\",\n nameMeta: \" autoCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const PinRelativeToCols: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"cols\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const PinRelativeToTable: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"table\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrush: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n },\n};\n\nexport const FillAvailableSpaceAfterCrushExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\\n fillAvailableSpaceAfterCrush\",\n nameMeta: \" fillAvailableSpaceAfterCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =\n {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n },\n };\n\nexport const CanPinRowsRelativeToRows: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"rows\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const CanPinRowsRelativeToTable: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"table\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const SizeByLargestHeader: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"cell\",\n },\n};\n\nexport const SizeByLargestHeaderWithMeta: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"header\",\n enableColumnPinning: true,\n meta: {\n age: {\n crushMinSizeBy: 'cell',\n },\n },\n },\n};\n"
|
|
5
|
+
"import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { getCoreRowModel } from \"@tanstack/react-table\";\nimport { AnoccaSkin } from \"..\";\nimport { ReactTanstackTableUi } from \"./ReactTanstackTableUiStoryComponent.mjs\";\nimport { createSourceCode } from \"./createSourceCode.mjs\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n title: \"ReactTanstackTableUi\",\n component: ReactTanstackTableUi,\n parameters: {\n // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n layout: \"centered\",\n },\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n data: { control: \"select\" },\n columns: { control: \"select\" },\n pinColsRelativeTo: { control: \"select\", options: [\"cols\", \"table\"] },\n skin: {\n control: \"object\",\n table: { disable: true },\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: {\n width: 600,\n height: 400,\n skin: AnoccaSkin,\n autoCrushColumns: false,\n data: \"big\",\n columns: \"few\",\n getCoreRowModel: getCoreRowModel(),\n pinColsRelativeTo: \"cols\",\n fillAvailableSpaceAfterCrush: false,\n scrollbarWidth: 16,\n getRowId: (row) => row.id,\n },\n} satisfies Meta<typeof ReactTanstackTableUi>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n args: {\n enableColumnPinning: true,\n autoCrushColumns: false,\n fillAvailableSpaceAfterCrush: false,\n pinColsRelativeTo: \"cols\",\n },\n parameters: {\n docs: {\n source: { language: \"tsx\", code: createSourceCode() },\n },\n },\n};\n\nexport const AutoCrushColumns: Story = {\n args: {\n autoCrushColumns: true,\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({ props: \" autoCrushColumns\" }),\n },\n },\n },\n};\n\nexport const AutoCrushColumnsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n enableColumnPinning: true,\n meta: {\n name: {\n autoCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\",\n nameMeta: \" autoCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const PinRelativeToCols: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"cols\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const PinRelativeToTable: Story = {\n args: {\n autoCrushColumns: true,\n pinColsRelativeTo: \"table\",\n enableColumnPinning: true,\n initialState: {\n columnPinning: {\n right: [\"city\"],\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrush: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n },\n};\n\nexport const FillAvailableSpaceAfterCrushExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n parameters: {\n docs: {\n source: {\n language: \"tsx\",\n code: createSourceCode({\n props: \" autoCrushColumns\\n fillAvailableSpaceAfterCrush\",\n nameMeta: \" fillAvailableSpaceAfterCrush: false,\",\n }),\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithTwoHeaderRows: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withTwoHeaderRows: true,\n },\n};\nexport const FillAvailableSpaceAfterCrushWithHeaderGroups: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withHeaderGroups: true,\n },\n};\nexport const FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withHeaderGroups: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n};\n\nexport const FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName: Story = {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n withTwoHeaderRows: true,\n meta: {\n name: {\n fillAvailableSpaceAfterCrush: false,\n },\n },\n },\n};\n\n\nexport const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =\n {\n args: {\n autoCrushColumns: true,\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n },\n };\n\nexport const CanPinRowsRelativeToRows: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"rows\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const CanPinRowsRelativeToTable: Story = {\n args: {\n enableRowPinning: true,\n enableColumnPinning: true,\n data: \"small\",\n pinRowsRelativeTo: \"table\",\n initialState: {\n rowPinning: {\n bottom: [\"3\"],\n },\n },\n },\n};\n\nexport const SizeByLargestHeader: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"cell\",\n },\n};\n\nexport const SizeByLargestHeaderWithMeta: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"header\",\n enableColumnPinning: true,\n meta: {\n age: {\n crushMinSizeBy: 'cell',\n },\n },\n },\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "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",
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "52C942491A55526164756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
// packages/skin-anocca/src/stories/ReactTanstackTableUiStoryComponent.tsx
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Box,
|
|
4
|
+
ScopedCssBaseline,
|
|
5
|
+
TextField,
|
|
6
|
+
ThemeProvider,
|
|
7
|
+
Typography
|
|
8
|
+
} from "@mui/material";
|
|
3
9
|
import { useTheme } from "@mui/material/styles";
|
|
4
10
|
import {
|
|
5
11
|
decorateColumnHelper,
|
|
@@ -40,6 +46,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
40
46
|
});
|
|
41
47
|
const fewColumns = [
|
|
42
48
|
columnHelper.accessor("name", {
|
|
49
|
+
id: "name",
|
|
43
50
|
header: "Name",
|
|
44
51
|
cell: (info) => /* @__PURE__ */ jsxs(Box, {
|
|
45
52
|
sx: { display: "flex", gap: 2, flex: 1 },
|
|
@@ -59,6 +66,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
59
66
|
meta: props.meta?.["name"]
|
|
60
67
|
}),
|
|
61
68
|
columnHelper.accessor("age", {
|
|
69
|
+
id: "age",
|
|
62
70
|
header: "Age",
|
|
63
71
|
meta: props.meta?.["age"],
|
|
64
72
|
cell: (info) => /* @__PURE__ */ jsx(Typography, {
|
|
@@ -68,6 +76,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
68
76
|
size: 50
|
|
69
77
|
}),
|
|
70
78
|
columnHelper.accessor("city", {
|
|
79
|
+
id: "city",
|
|
71
80
|
header: "City",
|
|
72
81
|
meta: props.meta?.["city"],
|
|
73
82
|
cell: (info) => /* @__PURE__ */ jsx(Typography, {
|
|
@@ -79,6 +88,7 @@ var ReactTanstackTableUi = (props) => {
|
|
|
79
88
|
const manyColumns = [
|
|
80
89
|
...fewColumns,
|
|
81
90
|
...Array.from({ length: 100 }, (_, i) => columnHelper.accessor(`col${i}`, {
|
|
91
|
+
id: `col${i}`,
|
|
82
92
|
header: `Column ${i}`,
|
|
83
93
|
cell: (info) => /* @__PURE__ */ jsx(Typography, {
|
|
84
94
|
variant: "body2",
|
|
@@ -86,8 +96,43 @@ var ReactTanstackTableUi = (props) => {
|
|
|
86
96
|
})
|
|
87
97
|
}))
|
|
88
98
|
];
|
|
89
|
-
|
|
90
|
-
|
|
99
|
+
const cols = props.columns === "few" ? fewColumns : manyColumns;
|
|
100
|
+
if (props.withHeaderGroups) {
|
|
101
|
+
cols.splice(0, 2, columnHelper.group({
|
|
102
|
+
id: `personal-info`,
|
|
103
|
+
header: "Personal Info",
|
|
104
|
+
columns: cols.slice(0, 2)
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
if (props.withTwoHeaderRows) {
|
|
108
|
+
return cols.map((col) => {
|
|
109
|
+
const newCol = col.id ? {
|
|
110
|
+
...col,
|
|
111
|
+
id: col.id,
|
|
112
|
+
header: () => /* @__PURE__ */ jsx(TextField, {
|
|
113
|
+
placeholder: "Search...",
|
|
114
|
+
slotProps: {
|
|
115
|
+
input: { sx: { height: "20px", width: "150px" } }
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
} : undefined;
|
|
119
|
+
const subColumns = newCol ? [newCol] : [];
|
|
120
|
+
return columnHelper.group({
|
|
121
|
+
id: `group-${col.id}`,
|
|
122
|
+
header: col.header,
|
|
123
|
+
columns: subColumns
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
return cols;
|
|
128
|
+
}, [
|
|
129
|
+
props.columns,
|
|
130
|
+
props.enableColumnPinning,
|
|
131
|
+
props.enableRowPinning,
|
|
132
|
+
props.meta,
|
|
133
|
+
props.withTwoHeaderRows,
|
|
134
|
+
props.withHeaderGroups
|
|
135
|
+
]);
|
|
91
136
|
const table = useReactTable({
|
|
92
137
|
...props,
|
|
93
138
|
data,
|
|
@@ -107,4 +152,4 @@ export {
|
|
|
107
152
|
ReactTanstackTableUi
|
|
108
153
|
};
|
|
109
154
|
|
|
110
|
-
//# debugId=
|
|
155
|
+
//# debugId=1AF1AFD066E5B64964756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStoryComponent.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import {
|
|
5
|
+
"import {\n Box,\n ScopedCssBaseline,\n TextField,\n ThemeProvider,\n Typography,\n} from \"@mui/material\";\nimport { useTheme } from \"@mui/material/styles\";\nimport {\n decorateColumnHelper,\n ReactTanstackTableUi as TableComponent,\n} from \"@rttui/core\";\nimport {\n ColumnDef,\n ColumnMeta,\n createColumnHelper,\n Table,\n TableOptions,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport { HeaderPinButtons } from \"../HeaderPinButtons.mjs\";\nimport React from \"react\";\nimport { RowPinButtons } from \"../RowPinButtons.mjs\";\ntype Person = {\n id: string;\n name: string;\n age: number;\n city: string;\n} & Record<`col${number}`, string>;\n\nconst smallData: Person[] = [\n { id: \"1\", name: \"John\", age: 20, city: \"New York\" },\n { id: \"2\", name: \"Jane\", age: 21, city: \"Los Angeles\" },\n { id: \"3\", name: \"Jim\", age: 22, city: \"Chicago\" },\n];\n\nconst bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({\n id: i.toString(),\n name: `Person ${i}`,\n age: 20 + i,\n city: `City ${i}`,\n ...Object.fromEntries(\n Array.from({ length: 100 }, (_, j) => [`col${j}`, `Value ${i}-${j}`]),\n ),\n}));\n\nexport const ReactTanstackTableUi = (\n props: {\n data: \"big\" | \"small\";\n columns: \"many\" | \"few\";\n meta?: Record<string, ColumnMeta<Person, string>>;\n withTwoHeaderRows?: boolean;\n withHeaderGroups?: boolean;\n } & Omit<TableOptions<Person>, \"data\" | \"columns\"> &\n Omit<React.ComponentProps<typeof TableComponent>, \"table\">,\n) => {\n const theme = useTheme();\n const data: Person[] = props.data === \"big\" ? bigData : smallData;\n\n const columns: ColumnDef<Person>[] = React.useMemo(() => {\n const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {\n header: (original) => (\n <Box sx={{ display: \"flex\", gap: 2 }}>\n {original}\n {props.enableColumnPinning && <HeaderPinButtons />}\n </Box>\n ),\n });\n\n const fewColumns: ColumnDef<Person>[] = [\n columnHelper.accessor(\"name\", {\n id: \"name\",\n header: \"Name\",\n cell: (info) => (\n <Box sx={{ display: \"flex\", gap: 2, flex: 1 }}>\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n {props.enableRowPinning && <Box sx={{ flexGrow: 1 }} />}\n {props.enableRowPinning && <RowPinButtons row={info.row} />}\n </Box>\n ),\n meta: props.meta?.[\"name\"],\n }),\n columnHelper.accessor(\"age\", {\n id: \"age\",\n header: \"Age\",\n meta: props.meta?.[\"age\"],\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n size: 50,\n }),\n columnHelper.accessor(\"city\", {\n id: \"city\",\n header: \"City\",\n meta: props.meta?.[\"city\"],\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n }),\n ];\n\n const manyColumns: ColumnDef<Person>[] = [\n ...fewColumns,\n ...Array.from({ length: 100 }, (_, i) =>\n columnHelper.accessor(`col${i}`, {\n id: `col${i}`,\n header: `Column ${i}`,\n cell: (info) => (\n <Typography variant=\"body2\">{info.getValue()}</Typography>\n ),\n }),\n ),\n ];\n\n const cols = props.columns === \"few\" ? fewColumns : manyColumns;\n\n if (props.withHeaderGroups) {\n cols.splice(\n 0,\n 2,\n columnHelper.group({\n id: `personal-info`,\n header: \"Personal Info\",\n columns: cols.slice(0, 2),\n }),\n );\n }\n\n if (props.withTwoHeaderRows) {\n return cols.map((col) => {\n const newCol: ColumnDef<Person> | undefined = col.id\n ? {\n ...col,\n id: col.id,\n header: () => (\n <TextField\n placeholder=\"Search...\"\n slotProps={{\n input: { sx: { height: \"20px\", width: \"150px\" } },\n }}\n />\n ),\n }\n : undefined;\n const subColumns: ColumnDef<Person>[] = newCol ? [newCol] : [];\n return columnHelper.group({\n id: `group-${col.id}`,\n header: col.header,\n columns: subColumns,\n });\n });\n }\n return cols;\n }, [\n props.columns,\n props.enableColumnPinning,\n props.enableRowPinning,\n props.meta,\n props.withTwoHeaderRows,\n props.withHeaderGroups,\n ]);\n\n const table = useReactTable({\n ...props,\n data,\n columns,\n });\n\n return (\n <ScopedCssBaseline>\n <ThemeProvider theme={theme}>\n <TableComponent {...props} table={table as Table<unknown>} />\n </ThemeProvider>\n </ScopedCssBaseline>\n );\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": ";AAAA;
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "1AF1AFD066E5B64964756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -10,6 +10,8 @@ declare const meta: {
|
|
|
10
10
|
age: number;
|
|
11
11
|
city: string;
|
|
12
12
|
} & Record<`col${number}`, string>, string>>;
|
|
13
|
+
withTwoHeaderRows?: boolean;
|
|
14
|
+
withHeaderGroups?: boolean;
|
|
13
15
|
} & Omit<import("@tanstack/react-table").TableOptions<{
|
|
14
16
|
id: string;
|
|
15
17
|
name: string;
|
|
@@ -65,6 +67,10 @@ export declare const PinRelativeToCols: Story;
|
|
|
65
67
|
export declare const PinRelativeToTable: Story;
|
|
66
68
|
export declare const FillAvailableSpaceAfterCrush: Story;
|
|
67
69
|
export declare const FillAvailableSpaceAfterCrushExceptName: Story;
|
|
70
|
+
export declare const FillAvailableSpaceAfterCrushWithTwoHeaderRows: Story;
|
|
71
|
+
export declare const FillAvailableSpaceAfterCrushWithHeaderGroups: Story;
|
|
72
|
+
export declare const FillAvailableSpaceAfterCrushWithHeaderGroupsExceptName: Story;
|
|
73
|
+
export declare const FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName: Story;
|
|
68
74
|
export declare const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story;
|
|
69
75
|
export declare const CanPinRowsRelativeToRows: Story;
|
|
70
76
|
export declare const CanPinRowsRelativeToTable: Story;
|
|
@@ -11,5 +11,7 @@ export declare const ReactTanstackTableUi: (props: {
|
|
|
11
11
|
data: "big" | "small";
|
|
12
12
|
columns: "many" | "few";
|
|
13
13
|
meta?: Record<string, ColumnMeta<Person, string>>;
|
|
14
|
+
withTwoHeaderRows?: boolean;
|
|
15
|
+
withHeaderGroups?: boolean;
|
|
14
16
|
} & Omit<TableOptions<Person>, "data" | "columns"> & Omit<React.ComponentProps<typeof TableComponent>, "table">) => import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export {};
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rttui/skin-anocca",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"main": "./dist/cjs/index.cjs",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@rttui/core": "^1.0.
|
|
6
|
+
"@rttui/core": "^1.0.17"
|
|
7
7
|
},
|
|
8
8
|
"module": "./dist/mjs/index.mjs",
|
|
9
9
|
"types": "./dist/types/index.d.ts",
|