@rttui/skin-anocca 1.0.20 → 1.0.21
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 +34 -1
- package/dist/cjs/stories/ReactTanstackTableUiStory.stories.cjs.map +3 -3
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs +3 -3
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs.map +3 -3
- package/dist/mjs/package.json +1 -1
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs +34 -1
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs.map +3 -3
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs +3 -3
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs.map +3 -3
- package/dist/types/stories/ReactTanstackTableUiStory.stories.d.ts +4 -1
- package/dist/types/stories/ReactTanstackTableUiStoryComponent.d.ts +1 -1
- package/package.json +2 -2
package/dist/cjs/package.json
CHANGED
|
@@ -30,10 +30,13 @@ var __export = (target, all) => {
|
|
|
30
30
|
var exports_ReactTanstackTableUiStory_stories = {};
|
|
31
31
|
__export(exports_ReactTanstackTableUiStory_stories, {
|
|
32
32
|
default: () => ReactTanstackTableUiStory_stories_default,
|
|
33
|
+
WorksWithoutRows: () => WorksWithoutRows,
|
|
34
|
+
StaticTable: () => StaticTable,
|
|
33
35
|
SizeByLargestHeaderWithMeta: () => SizeByLargestHeaderWithMeta,
|
|
34
36
|
SizeByLargestHeader: () => SizeByLargestHeader,
|
|
35
37
|
PinRelativeToTable: () => PinRelativeToTable,
|
|
36
38
|
PinRelativeToCols: () => PinRelativeToCols,
|
|
39
|
+
MeasureOverscanCols: () => MeasureOverscanCols,
|
|
37
40
|
FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: () => FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth,
|
|
38
41
|
FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName: () => FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName,
|
|
39
42
|
FillAvailableSpaceAfterCrushWithTwoHeaderRows: () => FillAvailableSpaceAfterCrushWithTwoHeaderRows,
|
|
@@ -272,5 +275,35 @@ var SizeByLargestHeaderWithMeta = {
|
|
|
272
275
|
}
|
|
273
276
|
}
|
|
274
277
|
};
|
|
278
|
+
var WorksWithoutRows = {
|
|
279
|
+
args: {
|
|
280
|
+
autoCrushColumns: true,
|
|
281
|
+
crushMinSizeBy: "both",
|
|
282
|
+
fillAvailableSpaceAfterCrush: true,
|
|
283
|
+
scrollbarWidth: 0,
|
|
284
|
+
data: "none",
|
|
285
|
+
withHeaderGroups: true
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
var StaticTable = {
|
|
289
|
+
args: {
|
|
290
|
+
data: "small",
|
|
291
|
+
columns: "few",
|
|
292
|
+
width: undefined,
|
|
293
|
+
height: undefined,
|
|
294
|
+
crushMinSizeBy: "both",
|
|
295
|
+
autoCrushColumns: true,
|
|
296
|
+
scrollbarWidth: 0
|
|
297
|
+
}
|
|
298
|
+
};
|
|
299
|
+
var MeasureOverscanCols = {
|
|
300
|
+
args: {
|
|
301
|
+
data: "big",
|
|
302
|
+
columns: "many",
|
|
303
|
+
crushMinSizeBy: "cell",
|
|
304
|
+
autoCrushColumns: true,
|
|
305
|
+
autoCrushNumCols: 1000
|
|
306
|
+
}
|
|
307
|
+
};
|
|
275
308
|
|
|
276
|
-
//# debugId=
|
|
309
|
+
//# debugId=87709B93AE5C599D64756E2164756E21
|
|
@@ -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 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\
|
|
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\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\nexport const WorksWithoutRows: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"both\",\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n data: \"none\",\n withHeaderGroups: true,\n },\n};\n\nexport const StaticTable: Story = {\n args: {\n data: \"small\",\n columns: \"few\",\n width: undefined,\n height: undefined,\n crushMinSizeBy: \"both\",\n autoCrushColumns: true,\n scrollbarWidth: 0,\n },\n};\n\nexport const MeasureOverscanCols: Story = {\n args: {\n data: \"big\",\n columns: \"many\",\n crushMinSizeBy: \"cell\",\n autoCrushColumns: true,\n autoCrushNumCols: 1000,\n },\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "87709B93AE5C599D64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -63,11 +63,11 @@ var bigData = Array.from({ length: 1000 }, (_, i) => ({
|
|
|
63
63
|
name: `Person ${i}`,
|
|
64
64
|
age: 20 + i,
|
|
65
65
|
city: `City ${i}`,
|
|
66
|
-
...Object.fromEntries(Array.from({ length: 100 }, (_2, j) => [`col${j}`,
|
|
66
|
+
...Object.fromEntries(Array.from({ length: 100 }, (_2, j) => [`col${j}`, `${i}-${j}`]))
|
|
67
67
|
}));
|
|
68
68
|
var ReactTanstackTableUi = (props) => {
|
|
69
69
|
const theme = import_styles.useTheme();
|
|
70
|
-
const data = props.data === "big" ? bigData : smallData;
|
|
70
|
+
const data = props.data === "big" ? bigData : props.data === "small" ? smallData : [];
|
|
71
71
|
const columns = import_react.default.useMemo(() => {
|
|
72
72
|
const columnHelper = import_core.decorateColumnHelper(import_react_table.createColumnHelper(), {
|
|
73
73
|
header: (original) => /* @__PURE__ */ jsx_runtime.jsxs(import_material.Box, {
|
|
@@ -183,4 +183,4 @@ var ReactTanstackTableUi = (props) => {
|
|
|
183
183
|
});
|
|
184
184
|
};
|
|
185
185
|
|
|
186
|
-
//# debugId=
|
|
186
|
+
//# debugId=9989356EC3F0F79F64756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStoryComponent.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
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}`,
|
|
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}`, `${i}-${j}`]),\n ),\n}));\n\nexport const ReactTanstackTableUi = (\n props: {\n data: \"big\" | \"small\" | \"none\";\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 : props.data === \"small\" ? 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "9989356EC3F0F79F64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/mjs/package.json
CHANGED
|
@@ -223,12 +223,45 @@ var SizeByLargestHeaderWithMeta = {
|
|
|
223
223
|
}
|
|
224
224
|
}
|
|
225
225
|
};
|
|
226
|
+
var WorksWithoutRows = {
|
|
227
|
+
args: {
|
|
228
|
+
autoCrushColumns: true,
|
|
229
|
+
crushMinSizeBy: "both",
|
|
230
|
+
fillAvailableSpaceAfterCrush: true,
|
|
231
|
+
scrollbarWidth: 0,
|
|
232
|
+
data: "none",
|
|
233
|
+
withHeaderGroups: true
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
var StaticTable = {
|
|
237
|
+
args: {
|
|
238
|
+
data: "small",
|
|
239
|
+
columns: "few",
|
|
240
|
+
width: undefined,
|
|
241
|
+
height: undefined,
|
|
242
|
+
crushMinSizeBy: "both",
|
|
243
|
+
autoCrushColumns: true,
|
|
244
|
+
scrollbarWidth: 0
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
var MeasureOverscanCols = {
|
|
248
|
+
args: {
|
|
249
|
+
data: "big",
|
|
250
|
+
columns: "many",
|
|
251
|
+
crushMinSizeBy: "cell",
|
|
252
|
+
autoCrushColumns: true,
|
|
253
|
+
autoCrushNumCols: 1000
|
|
254
|
+
}
|
|
255
|
+
};
|
|
226
256
|
export {
|
|
227
257
|
ReactTanstackTableUiStory_stories_default as default,
|
|
258
|
+
WorksWithoutRows,
|
|
259
|
+
StaticTable,
|
|
228
260
|
SizeByLargestHeaderWithMeta,
|
|
229
261
|
SizeByLargestHeader,
|
|
230
262
|
PinRelativeToTable,
|
|
231
263
|
PinRelativeToCols,
|
|
264
|
+
MeasureOverscanCols,
|
|
232
265
|
FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth,
|
|
233
266
|
FillAvailableSpaceAfterCrushWithTwoHeaderRowsExceptName,
|
|
234
267
|
FillAvailableSpaceAfterCrushWithTwoHeaderRows,
|
|
@@ -243,4 +276,4 @@ export {
|
|
|
243
276
|
AutoCrushColumns
|
|
244
277
|
};
|
|
245
278
|
|
|
246
|
-
//# debugId=
|
|
279
|
+
//# debugId=D31A2EB563BDA88C64756E2164756E21
|
|
@@ -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 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\
|
|
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\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\nexport const WorksWithoutRows: Story = {\n args: {\n autoCrushColumns: true,\n crushMinSizeBy: \"both\",\n fillAvailableSpaceAfterCrush: true,\n scrollbarWidth: 0,\n data: \"none\",\n withHeaderGroups: true,\n },\n};\n\nexport const StaticTable: Story = {\n args: {\n data: \"small\",\n columns: \"few\",\n width: undefined,\n height: undefined,\n crushMinSizeBy: \"both\",\n autoCrushColumns: true,\n scrollbarWidth: 0,\n },\n};\n\nexport const MeasureOverscanCols: Story = {\n args: {\n data: \"big\",\n columns: \"many\",\n crushMinSizeBy: \"cell\",\n autoCrushColumns: true,\n autoCrushNumCols: 1000,\n },\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "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
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "D31A2EB563BDA88C64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -29,11 +29,11 @@ var bigData = Array.from({ length: 1000 }, (_, i) => ({
|
|
|
29
29
|
name: `Person ${i}`,
|
|
30
30
|
age: 20 + i,
|
|
31
31
|
city: `City ${i}`,
|
|
32
|
-
...Object.fromEntries(Array.from({ length: 100 }, (_2, j) => [`col${j}`,
|
|
32
|
+
...Object.fromEntries(Array.from({ length: 100 }, (_2, j) => [`col${j}`, `${i}-${j}`]))
|
|
33
33
|
}));
|
|
34
34
|
var ReactTanstackTableUi = (props) => {
|
|
35
35
|
const theme = useTheme();
|
|
36
|
-
const data = props.data === "big" ? bigData : smallData;
|
|
36
|
+
const data = props.data === "big" ? bigData : props.data === "small" ? smallData : [];
|
|
37
37
|
const columns = React.useMemo(() => {
|
|
38
38
|
const columnHelper = decorateColumnHelper(createColumnHelper(), {
|
|
39
39
|
header: (original) => /* @__PURE__ */ jsxs(Box, {
|
|
@@ -152,4 +152,4 @@ export {
|
|
|
152
152
|
ReactTanstackTableUi
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
-
//# debugId=
|
|
155
|
+
//# debugId=A74B383E2189EE5D64756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ReactTanstackTableUiStoryComponent.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
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}`,
|
|
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}`, `${i}-${j}`]),\n ),\n}));\n\nexport const ReactTanstackTableUi = (\n props: {\n data: \"big\" | \"small\" | \"none\";\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 : props.data === \"small\" ? 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA,0BAEE;AAAA;AAEF;AAAA;AAAA;AAAA;AAQA;AACA;AACA;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,
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "A74B383E2189EE5D64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from "@storybook/react";
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: (props: {
|
|
5
|
-
data: "big" | "small";
|
|
5
|
+
data: "big" | "small" | "none";
|
|
6
6
|
columns: "many" | "few";
|
|
7
7
|
meta?: Record<string, import("@tanstack/react-table").ColumnMeta<{
|
|
8
8
|
id: string;
|
|
@@ -76,3 +76,6 @@ export declare const CanPinRowsRelativeToRows: Story;
|
|
|
76
76
|
export declare const CanPinRowsRelativeToTable: Story;
|
|
77
77
|
export declare const SizeByLargestHeader: Story;
|
|
78
78
|
export declare const SizeByLargestHeaderWithMeta: Story;
|
|
79
|
+
export declare const WorksWithoutRows: Story;
|
|
80
|
+
export declare const StaticTable: Story;
|
|
81
|
+
export declare const MeasureOverscanCols: Story;
|
|
@@ -8,7 +8,7 @@ type Person = {
|
|
|
8
8
|
city: string;
|
|
9
9
|
} & Record<`col${number}`, string>;
|
|
10
10
|
export declare const ReactTanstackTableUi: (props: {
|
|
11
|
-
data: "big" | "small";
|
|
11
|
+
data: "big" | "small" | "none";
|
|
12
12
|
columns: "many" | "few";
|
|
13
13
|
meta?: Record<string, ColumnMeta<Person, string>>;
|
|
14
14
|
withTwoHeaderRows?: boolean;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rttui/skin-anocca",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"main": "./dist/cjs/index.cjs",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@rttui/core": "^1.0.
|
|
6
|
+
"@rttui/core": "^1.0.20"
|
|
7
7
|
},
|
|
8
8
|
"module": "./dist/mjs/index.mjs",
|
|
9
9
|
"types": "./dist/types/index.d.ts",
|