87 | >(({ className, ...props }, ref) => (
88 | | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useTheme } from "next-themes"; // Handles theme switching
4 |
5 | import Link from "next/link"; // For navigation links
6 | import { usePathname } from "next/navigation"; // To determine the current path
7 | import { Sun, Moon, Menu, X } from "lucide-react"; // Icons for theme and mobile menu
8 | import { useState } from "react"; // For local state management
9 | import { Button } from "@/components/ui/button"; // ShadCN button component
10 |
11 | const Header = () => {
12 | const { theme, setTheme } = useTheme(); // Theme state and handler
13 | const pathname = usePathname(); // Current route path
14 | const [isMenuOpen, setIsMenuOpen] = useState(false); // State for mobile menu toggle
15 |
16 | // Navigation links
17 | const navigation = [
18 | { name: "Complex", href: "/" },
19 | { name: "Simple", href: "/normal" },
20 | { name: "Simple 2", href: "/normal-2" },
21 | { name: "Sub Rows", href: "/sub-rows" },
22 | { name: "Add Rows", href: "/add-rows" },
23 | ];
24 |
25 | // Toggle between light and dark themes
26 | const toggleTheme = () => {
27 | setTheme(theme === "dark" ? "light" : "dark");
28 | };
29 |
30 | return (
31 |
111 | );
112 | };
113 |
114 | export default Header;
115 |
--------------------------------------------------------------------------------
/src/app/normal/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * normal/page.tsx
3 | *
4 | * Demonstration of using the extended SheetTable with Zod-based validation.
5 | */
6 |
7 | "use client";
8 |
9 | import React, { useState } from "react";
10 |
11 | // ** import 3rd party lib
12 | import { z } from "zod";
13 |
14 | // ** import ui components
15 | import { Button } from "@/components/ui/button";
16 |
17 | // ** import components
18 | import SheetTable from "@/components/sheet-table";
19 | import { ExtendedColumnDef } from "@/components/sheet-table/utils";
20 |
21 | // ** import zod schema for row data
22 | import { rowDataZodSchema, RowData } from "@/schemas/row-data-schema";
23 |
24 | const materialNameSchema = rowDataZodSchema.shape.materialName; // required string
25 | const cftSchema = rowDataZodSchema.shape.cft; // optional number >= 0
26 | const rateSchema = rowDataZodSchema.shape.rate; // required number >= 0
27 | const amountSchema = rowDataZodSchema.shape.amount; // required number >= 0
28 |
29 | /**
30 | * Initial data for demonstration.
31 | */
32 | const initialData: RowData[] = [
33 | { id: "1", materialName: "Ultra Nitro Sealer", cft: 0.03, rate: 164, amount: 5.17 },
34 | { id: "2", materialName: "NC Thinner (Spl)", cft: 0.202, rate: 93, amount: 19.73 },
35 | { id: "3", materialName: "Ultra Nitro Sealer 2", cft: 0.072, rate: 164, amount: 12.4 },
36 | { id: "4", materialName: "Ultra Nitro Matt 2", cft: 0.051, rate: 209, amount: 11.19 },
37 | { id: "5", materialName: "Ultra Nitro Glossy 2", cft: 0.045, rate: 215, amount: 9.68 },
38 | ];
39 |
40 | /**
41 | * Extended column definitions, each with a validationSchema.
42 | * We rely on 'accessorKey' instead of 'id'. This is fine now
43 | * because we manually allowed 'accessorKey?: string'.
44 | */
45 | const columns: ExtendedColumnDef[] = [
46 | {
47 | accessorKey: "materialName",
48 | header: "Material Name",
49 | validationSchema: materialNameSchema,
50 | size: 120,
51 | minSize: 50,
52 | maxSize: 100,
53 | },
54 | {
55 | accessorKey: "cft",
56 | header: "CFT",
57 | validationSchema: cftSchema,
58 | maxSize: 20,
59 | },
60 | {
61 | accessorKey: "rate",
62 | header: "Rate",
63 | validationSchema: rateSchema,
64 | size: 80,
65 | minSize: 50,
66 | maxSize: 120,
67 | },
68 | {
69 | accessorKey: "amount",
70 | header: "Amount",
71 | validationSchema: amountSchema,
72 | size: 80,
73 | minSize: 50,
74 | maxSize: 120,
75 | },
76 | ];
77 |
78 | /**
79 | * HomePage - shows how to integrate the SheetTable with per-column Zod validation.
80 | */
81 | export default function HomePage() {
82 | const [data, setData] = useState(initialData);
83 |
84 |
85 | /**
86 | * onEdit callback: updates local state if the new value is valid. (Normal usage)
87 | */
88 | const handleEdit = (
89 | rowId: string, // Unique identifier for the row
90 | columnId: K, // Column key
91 | value: RowData[K], // New value for the cell
92 | ) => {
93 | setData((prevData) =>
94 | prevData.map((row) =>
95 | String(row.id) === rowId
96 | ? { ...row, [columnId]: value } // Update the row if the ID matches
97 | : row // Otherwise, return the row unchanged
98 | )
99 | );
100 |
101 | console.log(
102 | `State updated [row id=${rowId}, column=${columnId}, value=${value}]`,
103 | value,
104 | );
105 | };
106 |
107 | /**
108 | * Validate entire table on submit.
109 | * If any row fails, we log the errors. Otherwise, we log the data.
110 | */
111 | const handleSubmit = () => {
112 | const arraySchema = z.array(rowDataZodSchema);
113 | const result = arraySchema.safeParse(data);
114 |
115 | if (!result.success) {
116 | console.error("Table data is invalid:", result.error.issues);
117 | } else {
118 | console.log("Table data is valid! Submitting:", data);
119 | }
120 | };
121 |
122 | return (
123 |
124 | Home Page with Zod Validation
125 |
126 |
127 | columns={columns}
128 | data={data}
129 | onEdit={handleEdit}
130 | disabledColumns={["materialName"]} // e.g. ["materialName"]
131 | disabledRows={[2]}
132 | showHeader={true} // First header visibility
133 | showSecondHeader={true} // Second header visibility
134 | secondHeaderTitle="Custom Title Example" // Title for the second header
135 |
136 | enableColumnSizing
137 | />
138 |
139 |
140 |
141 | );
142 | }
143 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * page.tsx
3 | *
4 | * Demonstration of using the extended SheetTable with Zod-based validation.
5 | */
6 |
7 | "use client";
8 |
9 | import React, { useState } from "react";
10 |
11 | // ** import 3rd party lib
12 | import { z } from "zod";
13 |
14 | // ** import ui components
15 | import { Button } from "@/components/ui/button";
16 | import { TableCell, TableRow } from "@/components/ui/table";
17 |
18 | // ** import component
19 | import SheetTable from "@/components/sheet-table";
20 | import { ExtendedColumnDef } from "@/components/sheet-table/utils";
21 |
22 | // ** import zod schema for row data
23 | import { rowDataZodSchema, RowData } from "@/schemas/row-data-schema";
24 |
25 | const materialNameSchema = rowDataZodSchema.shape.materialName; // required string
26 | const cftSchema = rowDataZodSchema.shape.cft; // optional number >= 0
27 | const rateSchema = rowDataZodSchema.shape.rate; // required number >= 0
28 | const amountSchema = rowDataZodSchema.shape.amount; // required number >= 0
29 |
30 | /**
31 | * Initial data for demonstration.
32 | */
33 | const initialData: RowData[] = [
34 | {
35 | headerKey: "Dipping - 2 times",
36 | id: "1",
37 | materialName: "Ultra Nitro Sealer",
38 | cft: 0.03,
39 | rate: 164,
40 | amount: 5.17
41 | },
42 | {
43 | headerKey: "Dipping - 2 times",
44 | id: "2",
45 | materialName: "NC Thinner (Spl)",
46 | cft: 0.202,
47 | rate: 93,
48 | amount: 101.73,
49 | },
50 | {
51 | headerKey: "Spraying",
52 | id: "3",
53 | materialName: "Ultra Nitro Sealer 2",
54 | cft: 0.072,
55 | rate: 164,
56 | amount: 12.4,
57 | },
58 | {
59 | headerKey: "Spraying",
60 | id: "4",
61 | materialName: "Ultra Nitro Matt 2",
62 | cft: 0.051,
63 | rate: 209,
64 | amount: 11.19,
65 | },
66 | {
67 | headerKey: "Spraying",
68 | id: "5",
69 | materialName: "Ultra Nitro Glossy 2",
70 | cft: 0.045,
71 | rate: 215,
72 | amount: 120,
73 |
74 | },
75 | ];
76 |
77 | /**
78 | * Extended column definitions, each with a validationSchema.
79 | * We rely on 'accessorKey' instead of 'id'. This is fine now
80 | * because we manually allowed 'accessorKey?: string'.
81 | */
82 | const columns: ExtendedColumnDef[] = [
83 | {
84 | accessorKey: "materialName",
85 | header: "Material Name",
86 | validationSchema: materialNameSchema,
87 | className: "text-center font-bold bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-100", // Static styling
88 | },
89 | {
90 | accessorKey: "cft",
91 | header: "CFT",
92 | validationSchema: cftSchema,
93 | },
94 | {
95 | accessorKey: "rate",
96 | header: "Rate",
97 | validationSchema: rateSchema,
98 | },
99 | {
100 | accessorKey: "amount",
101 | header: "Amount",
102 | validationSchema: amountSchema,
103 | className: (row) => (row.amount > 100 ? "text-green-500" : "text-red-500"), // Dynamic styling based on row data
104 | },
105 | ];
106 |
107 | /**
108 | * HomePage - shows how to integrate the SheetTable with per-column Zod validation.
109 | */
110 | export default function HomePage() {
111 | const [data, setData] = useState(initialData);
112 |
113 |
114 | /**
115 | * onEdit callback: updates local state if the new value is valid. (Normal usage)
116 | */
117 | const handleEdit = (
118 | rowId: string, // Unique identifier for the row
119 | columnId: K, // Column key
120 | value: RowData[K], // New value for the cell
121 | ) => {
122 | setData((prevData) =>
123 | prevData.map((row) =>
124 | String(row.id) === rowId
125 | ? { ...row, [columnId]: value } // Update the row if the ID matches
126 | : row // Otherwise, return the row unchanged
127 | )
128 | );
129 |
130 | console.log(
131 | `State updated [row id=${rowId}, column=${columnId}, value=${value}]`,
132 | value,
133 | );
134 | };
135 |
136 | /**
137 | * Validate entire table on submit.
138 | * If any row fails, we log the errors. Otherwise, we log the data.
139 | */
140 | const handleSubmit = () => {
141 | const arraySchema = z.array(rowDataZodSchema);
142 | const result = arraySchema.safeParse(data);
143 |
144 | if (!result.success) {
145 | console.error("Table data is invalid:", result.error.issues);
146 | } else {
147 | console.log("Table data is valid! Submitting:", data);
148 | }
149 | };
150 |
151 | return (
152 |
153 | Home Page with Zod Validation
154 |
155 |
156 | columns={columns}
157 | data={data}
158 | onEdit={handleEdit}
159 | disabledColumns={["materialName"]} // e.g. ["materialName"]
160 | disabledRows={{
161 | // optional: disable specific rows
162 | "Dipping - 2 times": [0], // Disable the second row in this group
163 | Spraying: [1], // Disable the first row in this group
164 | }}
165 | // Grouping & header props
166 | showHeader={true} // First header visibility
167 | showSecondHeader={true} // Second header visibility
168 | secondHeaderTitle="Custom Title Example" // Title for the second header
169 | // Footer props
170 | totalRowValues={{
171 | // cft: 0.4,
172 | rate: 560,
173 | amount: 38.17,
174 | }}
175 | totalRowLabel="Total"
176 | totalRowTitle="Summary (Footer Total Title)"
177 | footerElement={
178 |
179 |
180 | Custom Footer Note
181 |
182 | Misc
183 | Extra Info
184 |
185 | }
186 | />
187 |
188 |
189 |
231 | Home Page with Zod Validation
232 |
233 |
234 | columns={columns}
235 | data={data}
236 | onEdit={handleEdit}
237 | showHeader={true}
238 | showSecondHeader={true}
239 | secondHeaderTitle="Custom Title Example"
240 | totalRowTitle="Total"
241 | totalRowValues={{
242 | materialName: "Total",
243 | cft: data.reduce((sum, row) => sum + (row.cft || 0), 0),
244 | rate: data.reduce((sum, row) => sum + row.rate, 0),
245 | amount: data.reduce((sum, row) => sum + row.amount, 0),
246 | }}
247 | enableColumnSizing
248 | />
249 |
250 |
251 |
252 | );
253 | }
--------------------------------------------------------------------------------
/src/app/add-rows/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 | import { nanoid } from "nanoid";
5 |
6 | // ** import ui components
7 | import { Button } from "@/components/ui/button";
8 |
9 | // ** import your reusable table
10 | import SheetTable from "@/components/sheet-table";
11 | import { ExtendedColumnDef } from "@/components/sheet-table/utils";
12 |
13 | // ** import zod schema for row data
14 | import { rowDataZodSchema, RowData } from "@/schemas/row-data-schema";
15 |
16 | const materialNameSchema = rowDataZodSchema.shape.materialName; // required string
17 | const cftSchema = rowDataZodSchema.shape.cft; // optional number >= 0
18 | const rateSchema = rowDataZodSchema.shape.rate; // required number >= 0
19 | const amountSchema = rowDataZodSchema.shape.amount; // required number >= 0
20 |
21 | /**
22 | * Initial data for demonstration.
23 | * We can still provide some initial IDs manually, but they must be unique.
24 | */
25 | const initialData: RowData[] = [
26 | {
27 | headerKey: "Group 1",
28 | id: "1",
29 | materialName: "Ultra Nitro Sealer",
30 | cft: 0.03,
31 | rate: 164,
32 | amount: 5.17
33 | },
34 | {
35 | headerKey: "Group 1",
36 | id: "2",
37 | materialName: "NC Thinner (Spl)",
38 | cft: 0.202,
39 | rate: 93,
40 | amount: 101.73,
41 | },
42 | {
43 | headerKey: "Group 2",
44 | id: "row-1",
45 | materialName: "Ultra Nitro Sealer",
46 | cft: 0.03,
47 | rate: 164,
48 | amount: 5.17,
49 | },
50 | {
51 | headerKey: "Group 2",
52 | id: "row-2",
53 | materialName: "NC Thinner (Spl)",
54 | cft: 0.202,
55 | rate: 93,
56 | amount: 19.73,
57 | subRows: [
58 | {
59 | id: "row-2.1",
60 | materialName: "NC Thinner (Spl) 1",
61 | cft: 0.203,
62 | rate: 94,
63 | amount: 20.0,
64 | },
65 | {
66 | id: "row-2.2",
67 | materialName: "NC Thinner (Spl) 2",
68 | cft: 0.204,
69 | rate: 95,
70 | amount: 20.3,
71 | },
72 | ],
73 | },
74 | {
75 | id: "row-3",
76 | materialName: "Ultra Nitro Sealer 2",
77 | cft: 0.072,
78 | rate: 165,
79 | amount: 12.4,
80 | },
81 | ];
82 |
83 | /**
84 | * Extended column definitions, each with a validationSchema.
85 | */
86 | const columns: ExtendedColumnDef[] = [
87 | {
88 | accessorKey: "materialName",
89 | header: "Material Name",
90 | validationSchema: materialNameSchema,
91 | size: 120,
92 | minSize: 50,
93 | maxSize: 100,
94 | },
95 | {
96 | accessorKey: "cft",
97 | header: "CFT",
98 | validationSchema: cftSchema,
99 | maxSize: 20,
100 | },
101 | {
102 | accessorKey: "rate",
103 | header: "Rate",
104 | validationSchema: rateSchema,
105 | size: 80,
106 | minSize: 50,
107 | maxSize: 120,
108 | },
109 | {
110 | accessorKey: "amount",
111 | header: "Amount",
112 | validationSchema: amountSchema,
113 | size: 80,
114 | minSize: 50,
115 | maxSize: 120,
116 | },
117 | ];
118 |
119 | /**
120 | * Recursively update a row in nested data by matching rowId.
121 | */
122 | function updateNestedRow(
123 | rows: RowData[],
124 | rowId: string,
125 | colKey: K,
126 | newValue: RowData[K],
127 | ): RowData[] {
128 | return rows.map((row) => {
129 | if (row.id === rowId) {
130 | return { ...row, [colKey]: newValue };
131 | }
132 | if (row.subRows?.length) {
133 | return {
134 | ...row,
135 | subRows: updateNestedRow(row.subRows, rowId, colKey, newValue),
136 | };
137 | }
138 | return row;
139 | });
140 | }
141 |
142 | /**
143 | * Recursively add a sub-row under a given parent (by rowId).
144 | * Always generate a brand-new ID via nanoid().
145 | */
146 | function addSubRowToRow(rows: RowData[], parentId: string): RowData[] {
147 | return rows.map((row) => {
148 | if (row.id === parentId) {
149 | const newSubRow: RowData = {
150 | id: nanoid(), // <-- Generate a guaranteed unique ID
151 | materialName: "New SubRow",
152 | cft: 0,
153 | rate: 0,
154 | amount: 0,
155 | };
156 | return {
157 | ...row,
158 | subRows: [...(row.subRows ?? []), newSubRow],
159 | };
160 | } else if (row.subRows?.length) {
161 | return { ...row, subRows: addSubRowToRow(row.subRows, parentId) };
162 | }
163 | return row;
164 | });
165 | }
166 |
167 | /**
168 | * Remove the row with the given rowId, recursively if in subRows.
169 | */
170 | function removeRowRecursively(rows: RowData[], rowId: string): RowData[] {
171 | return rows
172 | .filter((row) => row.id !== rowId)
173 | .map((row) => {
174 | if (row.subRows?.length) {
175 | return { ...row, subRows: removeRowRecursively(row.subRows, rowId) };
176 | }
177 | return row;
178 | });
179 | }
180 |
181 | /**
182 | * HomePage - shows how to integrate the SheetTable with dynamic row addition,
183 | * guaranteed unique IDs, sub-row removal, and validation on submit.
184 | */
185 | export default function HomePage() {
186 | const [data, setData] = useState(initialData);
187 |
188 | /**
189 | * onEdit callback: updates local state if the new value is valid.
190 | */
191 | const handleEdit = (
192 | rowId: string,
193 | columnId: K,
194 | value: RowData[K],
195 | ) => {
196 | setData((prevData) => updateNestedRow(prevData, rowId, columnId, value));
197 | };
198 |
199 | /**
200 | * Validate entire table on submit.
201 | */
202 | const handleSubmit = () => {
203 | const validateRows = (rows: RowData[]): boolean => {
204 | for (const row of rows) {
205 | const result = rowDataZodSchema.safeParse(row);
206 | if (!result.success) {
207 | console.error("Row validation failed:", result.error.issues, row);
208 | return false;
209 | }
210 | if (row.subRows?.length) {
211 | if (!validateRows(row.subRows)) return false;
212 | }
213 | }
214 | return true;
215 | };
216 |
217 | if (validateRows(data)) {
218 | console.log("Table data is valid! Submitting:", data);
219 | } else {
220 | console.error("Table data is invalid.");
221 | }
222 | };
223 |
224 | /**
225 | * Add a brand-new main row (non-sub-row).
226 | * Also generate a unique ID for it via nanoid().
227 | */
228 | const addMainRow = () => {
229 | const newRow: RowData = {
230 | id: nanoid(), // Unique ID
231 | materialName: "New Row",
232 | cft: 0,
233 | rate: 0,
234 | amount: 0,
235 | };
236 | setData((prev) => [...prev, newRow]);
237 | };
238 |
239 | /**
240 | * Add a sub-row to a row with the given rowId.
241 | */
242 | const handleAddRowFunction = (parentId: string) => {
243 | console.log("Adding sub-row under row:", parentId);
244 | setData((old) => addSubRowToRow(old, parentId));
245 | };
246 |
247 | /**
248 | * Remove row (and subRows) by rowId.
249 | */
250 | const handleRemoveRowFunction = (rowId: string) => {
251 | console.log("Removing row:", rowId);
252 | setData((old) => removeRowRecursively(old, rowId));
253 | };
254 |
255 | return (
256 |
257 | Home Page with Dynamic Rows & Unique IDs
258 |
259 |
260 |
261 |
262 |
263 |
264 | columns={columns}
265 | data={data}
266 | onEdit={handleEdit}
267 | enableColumnSizing
268 | // Show both icons on the "left"
269 | rowActions={{ add: "left", remove: "right" }}
270 | handleAddRowFunction={handleAddRowFunction}
271 | handleRemoveRowFunction={handleRemoveRowFunction}
272 | secondHeaderTitle="Custom Title Example"
273 | totalRowTitle="Total"
274 | totalRowValues={{
275 | materialName: "Total",
276 | cft: data.reduce((sum, row) => sum + (row.cft || 0), 0),
277 | rate: data.reduce((sum, row) => sum + row.rate, 0),
278 | amount: data.reduce((sum, row) => sum + row.amount, 0),
279 | }}
280 | />
281 |
282 |
283 |
286 |
287 |
265 |
266 |
267 | {table.getHeaderGroups().map((headerGroup) => (
268 |
269 | {headerGroup.headers.map((header) => (
270 | |
274 | {flexRender(header.column.columnDef.header, header.getContext())}
275 | |
276 | ))}
277 |
278 | ))}
279 |
280 |
281 | {table.getRowModel().rows.map((row) => (
282 |
286 | {row.getVisibleCells().map((cell) => {
287 | const colDef = cell.column.columnDef as ExtendedColumnDef;
288 | const colKey = getColumnKey(colDef);
289 |
290 | // Determine if cell is disabled
291 | const isDisabled =
292 | disabledRows.includes(row.index) || disabledColumns.includes(colKey);
293 |
294 | // Check for error
295 | const errorMsg = cellErrors[row.index]?.[colKey] || null;
296 |
297 | return (
298 | | handleKeyDown(e, colDef)}
309 | onPaste={(e) => handlePaste(e, colDef)}
310 | // Real-time check => highlight errors or success logs
311 | onInput={(e) => handleCellInput(e, row.index, colDef)}
312 | // Final check => if valid => onEdit => updates parent
313 | onBlur={(e) => handleCellBlur(e, row.index, colDef)}
314 | >
315 | {flexRender(cell.column.columnDef.cell, cell.getContext())}
316 | |
317 | );
318 | })}
319 |
320 | ))}
321 |
322 |
323 |
468 | {hasSubRows && (
469 |
483 | )}
484 |
490 | handleCellFocus(e, groupKey, rowData, colDef)
491 | }
492 | onKeyDown={(e) => {
493 | if (
494 | (e.ctrlKey || e.metaKey) &&
495 | ["a", "c", "x", "z", "v"].includes(e.key.toLowerCase())
496 | ) {
497 | return;
498 | }
499 | handleKeyDown(e, colDef);
500 | }}
501 | onPaste={(e) => handlePaste(e, colDef)}
502 | onInput={(e) =>
503 | handleCellInput(e, groupKey, rowData, colDef)
504 | }
505 | onBlur={(e) => handleCellBlur(e, groupKey, rowData, colDef)}
506 | >
507 | {rawCellContent}
508 |
509 |
712 |
713 |
714 | Dynamic, editable data table with grouping & nested sub-rows.
715 |
716 | {/* Primary header */}
717 | {showHeader && (
718 |
719 |
720 | {/* Right icon cells empty headers */}
721 | {addPos === "left" && (
722 |
726 | )}
727 |
728 | {removePos === "left" && (
729 |
733 | )}
734 |
735 | {table.getHeaderGroups().map((headerGroup) =>
736 | headerGroup.headers.map((header) => {
737 | const style: React.CSSProperties = {};
738 | if (enableColumnSizing) {
739 | const col = header.column.columnDef;
740 | const size = header.getSize();
741 | if (size) style.width = `${size}px`;
742 | if (col.minSize) style.minWidth = `${col.minSize}px`;
743 | if (col.maxSize) style.maxWidth = `${col.maxSize}px`;
744 | }
745 |
746 | return (
747 |
752 | {flexRender(
753 | header.column.columnDef.header,
754 | header.getContext(),
755 | )}
756 |
757 | );
758 | }),
759 | )}
760 |
761 | {/* Left icon cells empty headers */}
762 |
763 | {addPos === "right" && (
764 |
768 | )}
769 |
770 | {removePos === "right" && (
771 |
775 | )}
776 |
777 |
778 | )}
779 | {/* Optional second header */}{" "}
780 | {showSecondHeader && secondHeaderTitle && (
781 |
782 |
783 | {/* Right icon cells empty headers */}
784 | {addPos === "left" && (
785 |
789 | )}
790 |
791 | {removePos === "left" && (
792 |
796 | )}
797 |
798 |
799 | {secondHeaderTitle}
800 |
801 |
802 | {/* Left icon cells empty headers */}
803 | {addPos === "right" && (
804 |
808 | )}
809 |
810 | {removePos === "right" && (
811 |
815 | )}
816 |
817 |
818 | )}
819 |
820 | {Object.entries(groupedData).map(([groupKey, topRows]) => (
821 |
822 | {/* Group label row (if not ungrouped) */}
823 | {groupKey !== "ungrouped" && (
824 |
825 |
826 | {/* Right icon cells empty headers */}
827 | {addPos === "left" && (
828 |
832 | )}
833 |
834 | {removePos === "left" && (
835 |
839 | )}
840 |
841 |
845 | {groupKey}
846 |
847 |
848 | {/* Left icon cells empty headers */}
849 | {addPos === "right" && (
850 |
854 | )}
855 |
856 | {removePos === "right" && (
857 |
861 | )}
862 |
863 |
864 | )}
865 | {/* For each top-level row in this group, find the actual row in table.
866 | Then recursively render it with renderRow() */}{" "}
867 | {topRows.map((rowData) => {
868 | const row = table
869 | .getRowModel()
870 | .flatRows.find((r) => r.original === rowData);
871 | if (!row) return null;
872 |
873 | return renderRow(row, groupKey, 0);
874 | })}
875 |
876 | ))}
877 |
878 | {/* Render footer (totals row + custom footer) */}
879 | {renderFooter()}
880 |
881 | |