@databricks/appkit-ui 0.0.2

package/dist/react/lib/format.js

@@ -0,0 +1,42 @@
+//#region src/react/lib/format.ts
+/**
+* Formats numeric values based on field name context
+* @param value - The numeric value to format
+* @param fieldName - The field name to determine formatting
+* @returns Formatted string representation
+* @example
+* formatChartValue(1234.56, "cost") // "$1,234.56"
+* formatChartValue(5000, "users") // "5.0k"
+* formatChartValue(42.7, "percentage") // "42.7"
+*/
+function formatChartValue(value, fieldName) {
+	if (fieldName.toLowerCase().includes("cost") || fieldName.toLowerCase().includes("price") || fieldName.toLowerCase().includes("spend") || fieldName.toLowerCase().includes("revenue") || fieldName.toLowerCase().includes("usd")) return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(value);
+	if (value >= 1e3) return new Intl.NumberFormat("en-US", {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value);
+	return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+/**
+* Converts field names to human-readable labels
+* @param field - Field name in camelCase or snake_case
+* @returns Formatted label with proper capitalization
+* @example
+* formatFieldLabel("totalCost") // "Total Cost"
+* formatFieldLabel("user_name") // "User Name"
+* formatFieldLabel("revenue") // "Revenue"
+*/
+function formatFieldLabel(field) {
+	return field.replace(/[^a-zA-Z0-9_-]/g, "").replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
+}
+/** Regex for validating field names */
+const SAFE_KEY_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+
+//#endregion
+export { SAFE_KEY_REGEX, formatChartValue, formatFieldLabel };
+//# sourceMappingURL=format.js.map

package/dist/react/lib/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","names":[],"sources":["../../../src/react/lib/format.ts"],"sourcesContent":["/**\n * Formats numeric values based on field name context\n * @param value - The numeric value to format\n * @param fieldName - The field name to determine formatting\n * @returns Formatted string representation\n * @example\n * formatChartValue(1234.56, \"cost\") // \"$1,234.56\"\n * formatChartValue(5000, \"users\") // \"5.0k\"\n * formatChartValue(42.7, \"percentage\") // \"42.7\"\n */\nexport function formatChartValue(value: number, fieldName: string): string {\n  if (\n    fieldName.toLowerCase().includes(\"cost\") ||\n    fieldName.toLowerCase().includes(\"price\") ||\n    fieldName.toLowerCase().includes(\"spend\") ||\n    fieldName.toLowerCase().includes(\"revenue\") ||\n    fieldName.toLowerCase().includes(\"usd\")\n  ) {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(value);\n  }\n\n  if (value >= 1000) {\n    return new Intl.NumberFormat(\"en-US\", {\n      notation: \"compact\",\n      maximumFractionDigits: 1,\n    }).format(value);\n  }\n\n  return value.toLocaleString(\"en-US\", {\n    maximumFractionDigits: 2,\n  });\n}\n\n/**\n * Converts field names to human-readable labels\n * @param field - Field name in camelCase or snake_case\n * @returns Formatted label with proper capitalization\n * @example\n * formatFieldLabel(\"totalCost\") // \"Total Cost\"\n * formatFieldLabel(\"user_name\") // \"User Name\"\n * formatFieldLabel(\"revenue\") // \"Revenue\"\n */\nexport function formatFieldLabel(field: string): string {\n  const safe = field.replace(/[^a-zA-Z0-9_-]/g, \"\");\n  return safe\n    .replace(/([A-Z])/g, \" $1\")\n    .replace(/_/g, \" \")\n    .replace(/\\b\\w/g, (l) => l.toUpperCase())\n    .trim();\n}\n\n/** Regex for validating field names */\nexport const SAFE_KEY_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]*$/;\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,iBAAiB,OAAe,WAA2B;AACzE,KACE,UAAU,aAAa,CAAC,SAAS,OAAO,IACxC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,UAAU,IAC3C,UAAU,aAAa,CAAC,SAAS,MAAM,CAEvC,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,OAAO;EACP,UAAU;EACV,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,KAAI,SAAS,IACX,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU;EACV,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,QAAO,MAAM,eAAe,SAAS,EACnC,uBAAuB,GACxB,CAAC;;;;;;;;;;;AAYJ,SAAgB,iBAAiB,OAAuB;AAEtD,QADa,MAAM,QAAQ,mBAAmB,GAAG,CAE9C,QAAQ,YAAY,MAAM,CAC1B,QAAQ,MAAM,IAAI,CAClB,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CACxC,MAAM;;;AAIX,MAAa,iBAAiB"}

package/dist/react/lib/utils.js

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/react/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };
+//# sourceMappingURL=utils.js.map

package/dist/react/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/react/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;AAGA,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,QAAQ,KAAK,OAAO,CAAC"}

package/dist/react/table/data-table.d.ts

@@ -0,0 +1,47 @@
+import { DataTableProps } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/table/data-table.d.ts
+
+/**
+ * Production-ready data table with automatic data fetching and state management
+ * Features:
+ *  - Automatic column generation from data structure
+ *  - Integrated with useAnalyticsQuery for data fetching
+ *  - Built-in loading, error, and empty states
+ *  - Dynamic filtering, sorting and pagination
+ *  - Column visibility controls
+ *  - Responsive design
+ * @param props - Props for the DataTable component
+ * @param props.queryKey - The query key to fetch the data
+ * @param props.parameters - The parameters to pass to the query
+ * @param props.filterColumn - The column to filter by
+ * @param props.filterPlaceholder - The placeholder for the filter input
+ * @param props.children - Optional children for full control mode
+ * @returns - The rendered data table component
+ *
+ * @example
+ * // Opinionated mode
+ * <DataTable
+ *  queryKey="users-list"
+ *  parameters={{ status: "active" }}
+ *  filterColumn="email"
+ *  filterPlaceholder="Filter by email..."
+ * />
+ * @example
+ * // full control mode
+ * <DataTable queryKey="users-list" parameters={{ status: "active" }}>
+ *   {(table) => (
+ *     <div>
+ *       <h2>Custom Table UI</h2>
+ *       {table.getRowModel().rows.map(row => (
+ *         <div key={row.id}>{row.original.name}</div>
+ *       ))}
+ *     </div>
+ *   )}
+ * </DataTable>
+ */
+declare function DataTable(props: DataTableProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTable };
+//# sourceMappingURL=data-table.d.ts.map

package/dist/react/table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,SAAA,QAAiB,iBAAc,kBAAA,CAAA,GAAA,CAAA"}

package/dist/react/table/data-table.js

@@ -0,0 +1,205 @@
+import { formatFieldLabel } from "../lib/format.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Input } from "../ui/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { TableWrapper } from "./table-wrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+
+//#region src/react/table/data-table.tsx
+/**
+* Production-ready data table with automatic data fetching and state management
+* Features:
+*  - Automatic column generation from data structure
+*  - Integrated with useAnalyticsQuery for data fetching
+*  - Built-in loading, error, and empty states
+*  - Dynamic filtering, sorting and pagination
+*  - Column visibility controls
+*  - Responsive design
+* @param props - Props for the DataTable component
+* @param props.queryKey - The query key to fetch the data
+* @param props.parameters - The parameters to pass to the query
+* @param props.filterColumn - The column to filter by
+* @param props.filterPlaceholder - The placeholder for the filter input
+* @param props.children - Optional children for full control mode
+* @returns - The rendered data table component
+*
+* @example
+* // Opinionated mode
+* <DataTable
+*  queryKey="users-list"
+*  parameters={{ status: "active" }}
+*  filterColumn="email"
+*  filterPlaceholder="Filter by email..."
+* />
+* @example
+* // full control mode
+* <DataTable queryKey="users-list" parameters={{ status: "active" }}>
+*   {(table) => (
+*     <div>
+*       <h2>Custom Table UI</h2>
+*       {table.getRowModel().rows.map(row => (
+*         <div key={row.id}>{row.original.name}</div>
+*       ))}
+*     </div>
+*   )}
+* </DataTable>
+*/
+function DataTable(props) {
+	const { parameters, queryKey, filterColumn, filterPlaceholder, transform, labels, ariaLabel, testId, className, enableRowSelection, onRowSelectionChange, children, pageSize = 10, pageSizeOptions = [
+		10,
+		25,
+		50,
+		100
+	] } = props;
+	const finalLabels = {
+		columnsButton: "Columns",
+		noResults: "No results found.",
+		rowsFound: `\${count} row(s) found`,
+		previousButton: "Previous",
+		nextButton: "Next",
+		rowsPerPage: "Rows per page",
+		showing: `Showing \${from} to \${to} of \${total}`,
+		...labels
+	};
+	return /* @__PURE__ */ jsx(TableWrapper, {
+		queryKey,
+		parameters,
+		ariaLabel,
+		testId,
+		className,
+		transformer: transform,
+		enableRowSelection,
+		onRowSelectionChange,
+		pageSize,
+		children: (table) => {
+			if (children) return children(table);
+			const data = table.options.data;
+			const defaultFilterColumn = filterColumn || (data && data.length > 0 ? Object.keys(data[0]).find((key) => typeof data[0][key] === "string") : null);
+			const totalRows = table.getFilteredRowModel().rows.length;
+			const currentPage = table.getState().pagination.pageIndex + 1;
+			const currentPageSize = table.getState().pagination.pageSize;
+			const fromRow = totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
+			const toRow = Math.min(currentPage * currentPageSize, totalRows);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "w-full",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center py-4 gap-2",
+						children: [defaultFilterColumn && /* @__PURE__ */ jsx(Input, {
+							placeholder: filterPlaceholder || `Filter by ${formatFieldLabel(defaultFilterColumn)}...`,
+							value: table.getColumn(defaultFilterColumn)?.getFilterValue() ?? "",
+							onChange: (event) => table.getColumn(defaultFilterColumn)?.setFilterValue(event.target.value),
+							className: "max-w-sm"
+						}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								className: "ml-auto",
+								children: [
+									finalLabels.columnsButton,
+									" ",
+									/* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4" })
+								]
+							})
+						}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+							align: "end",
+							children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
+								return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+									className: "capitalize",
+									checked: column.getIsVisible(),
+									onCheckedChange: (value) => column.toggleVisibility(!!value),
+									children: formatFieldLabel(column.id)
+								}, column.id);
+							})
+						})] })]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-hidden rounded-md border border-border",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "max-h-[600px] overflow-y-auto",
+							children: /* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(TableHeader, {
+								className: "sticky top-0 bg-background z-10",
+								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+									const isSelectColumn = header.column.id === "select";
+									return /* @__PURE__ */ jsx(TableHead, {
+										style: {
+											width: header.getSize(),
+											position: "relative"
+										},
+										className: isSelectColumn ? "w-[40px] p-0" : void 0,
+										children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+									}, header.id);
+								}) }, headerGroup.id))
+							}), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+								"data-state": row.getIsSelected() && "selected",
+								children: row.getVisibleCells().map((cell) => {
+									const isSelectColumn = cell.column.id === "select";
+									return /* @__PURE__ */ jsx(TableCell, {
+										style: { width: cell.column.getSize() },
+										className: isSelectColumn ? "w-[40px] p-0" : void 0,
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									}, cell.id);
+								})
+							}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: table.getAllColumns().length,
+								className: "h-24 text-center",
+								children: finalLabels.noResults
+							}) }) })] })
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between py-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-6",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-foreground text-sm",
+								children: totalRows > 0 ? finalLabels.showing.replace(`\${from}`, fromRow.toString()).replace(`\${to}`, toRow.toString()).replace(`\${total}`, totalRows.toString()) : finalLabels.noResults
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-sm text-foreground",
+									children: finalLabels.rowsPerPage
+								}), /* @__PURE__ */ jsxs(Select, {
+									value: currentPageSize.toString(),
+									onValueChange: (value) => {
+										table.setPageSize(Number(value));
+									},
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										className: "w-[70px]",
+										children: /* @__PURE__ */ jsx(SelectValue, {})
+									}), /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+										value: size.toString(),
+										children: size
+									}, size)) })]
+								})]
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "space-x-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => table.previousPage(),
+								disabled: !table.getCanPreviousPage(),
+								children: finalLabels.previousButton
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => table.nextPage(),
+								disabled: !table.getCanNextPage(),
+								children: finalLabels.nextButton
+							})]
+						})]
+					})
+				]
+			});
+		}
+	});
+}
+
+//#endregion
+export { DataTable };
+//# sourceMappingURL=data-table.js.map

package/dist/react/table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport { ChevronDown } from \"lucide-react\";\nimport { formatFieldLabel } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { Input } from \"../ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport { TableWrapper } from \"./table-wrapper\";\nimport type { DataTableLabels, DataTableProps } from \"./types\";\n\n/**\n * Production-ready data table with automatic data fetching and state management\n * Features:\n *  - Automatic column generation from data structure\n *  - Integrated with useAnalyticsQuery for data fetching\n *  - Built-in loading, error, and empty states\n *  - Dynamic filtering, sorting and pagination\n *  - Column visibility controls\n *  - Responsive design\n * @param props - Props for the DataTable component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query\n * @param props.filterColumn - The column to filter by\n * @param props.filterPlaceholder - The placeholder for the filter input\n * @param props.children - Optional children for full control mode\n * @returns - The rendered data table component\n *\n * @example\n * // Opinionated mode\n * <DataTable\n *  queryKey=\"users-list\"\n *  parameters={{ status: \"active\" }}\n *  filterColumn=\"email\"\n *  filterPlaceholder=\"Filter by email...\"\n * />\n * @example\n * // full control mode\n * <DataTable queryKey=\"users-list\" parameters={{ status: \"active\" }}>\n *   {(table) => (\n *     <div>\n *       <h2>Custom Table UI</h2>\n *       {table.getRowModel().rows.map(row => (\n *         <div key={row.id}>{row.original.name}</div>\n *       ))}\n *     </div>\n *   )}\n * </DataTable>\n */\nexport function DataTable(props: DataTableProps) {\n  const {\n    parameters,\n    queryKey,\n    filterColumn,\n    filterPlaceholder,\n    transform,\n    labels,\n    ariaLabel,\n    testId,\n    className,\n    enableRowSelection,\n    onRowSelectionChange,\n    children,\n    pageSize = 10,\n    pageSizeOptions = [10, 25, 50, 100],\n  } = props;\n\n  const defaultLabels: Required<DataTableLabels> = {\n    columnsButton: \"Columns\",\n    noResults: \"No results found.\",\n    rowsFound: `\\${count} row(s) found`,\n    previousButton: \"Previous\",\n    nextButton: \"Next\",\n    rowsPerPage: \"Rows per page\",\n    showing: `Showing \\${from} to \\${to} of \\${total}`,\n  };\n\n  const finalLabels = { ...defaultLabels, ...labels };\n\n  return (\n    <TableWrapper\n      queryKey={queryKey}\n      parameters={parameters}\n      ariaLabel={ariaLabel}\n      testId={testId}\n      className={className}\n      transformer={transform}\n      enableRowSelection={enableRowSelection}\n      onRowSelectionChange={onRowSelectionChange}\n      pageSize={pageSize}\n    >\n      {(table) => {\n        if (children) {\n          return children(table);\n        }\n\n        const data = table.options.data;\n\n        const defaultFilterColumn =\n          filterColumn ||\n          (data && data.length > 0\n            ? Object.keys(data[0] as Record<string, any>).find(\n                (key) =>\n                  typeof (data[0] as Record<string, any>)[key] === \"string\",\n              )\n            : null);\n\n        const totalRows = table.getFilteredRowModel().rows.length;\n        const currentPage = table.getState().pagination.pageIndex + 1;\n        const currentPageSize = table.getState().pagination.pageSize;\n        const fromRow =\n          totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;\n        const toRow = Math.min(currentPage * currentPageSize, totalRows);\n\n        return (\n          <div className=\"w-full\">\n            <div className=\"flex items-center py-4 gap-2\">\n              {defaultFilterColumn && (\n                <Input\n                  placeholder={\n                    filterPlaceholder ||\n                    `Filter by ${formatFieldLabel(defaultFilterColumn)}...`\n                  }\n                  value={\n                    (table\n                      .getColumn(defaultFilterColumn)\n                      ?.getFilterValue() as string) ?? \"\"\n                  }\n                  onChange={(event) =>\n                    table\n                      .getColumn(defaultFilterColumn)\n                      ?.setFilterValue(event.target.value)\n                  }\n                  className=\"max-w-sm\"\n                />\n              )}\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                    {finalLabels.columnsButton}{\" \"}\n                    <ChevronDown className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onCheckedChange={(value) =>\n                            column.toggleVisibility(!!value)\n                          }\n                        >\n                          {formatFieldLabel(column.id)}\n                        </DropdownMenuCheckboxItem>\n                      );\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <div className=\"overflow-hidden rounded-md border border-border\">\n              <div className=\"max-h-[600px] overflow-y-auto\">\n                <Table>\n                  <TableHeader className=\"sticky top-0 bg-background z-10\">\n                    {table.getHeaderGroups().map((headerGroup) => (\n                      <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                          const isSelectColumn = header.column.id === \"select\";\n                          return (\n                            <TableHead\n                              key={header.id}\n                              style={{\n                                width: header.getSize(),\n                                position: \"relative\",\n                              }}\n                              className={\n                                isSelectColumn ? \"w-[40px] p-0\" : undefined\n                              }\n                            >\n                              {header.isPlaceholder\n                                ? null\n                                : flexRender(\n                                    header.column.columnDef.header,\n                                    header.getContext(),\n                                  )}\n                            </TableHead>\n                          );\n                        })}\n                      </TableRow>\n                    ))}\n                  </TableHeader>\n                  <TableBody>\n                    {table.getRowModel().rows?.length ? (\n                      table.getRowModel().rows.map((row) => (\n                        <TableRow\n                          key={row.id}\n                          data-state={row.getIsSelected() && \"selected\"}\n                        >\n                          {row.getVisibleCells().map((cell) => {\n                            const isSelectColumn = cell.column.id === \"select\";\n                            return (\n                              <TableCell\n                                key={cell.id}\n                                style={{\n                                  width: cell.column.getSize(),\n                                }}\n                                className={\n                                  isSelectColumn ? \"w-[40px] p-0\" : undefined\n                                }\n                              >\n                                {flexRender(\n                                  cell.column.columnDef.cell,\n                                  cell.getContext(),\n                                )}\n                              </TableCell>\n                            );\n                          })}\n                        </TableRow>\n                      ))\n                    ) : (\n                      <TableRow>\n                        <TableCell\n                          colSpan={table.getAllColumns().length}\n                          className=\"h-24 text-center\"\n                        >\n                          {finalLabels.noResults}\n                        </TableCell>\n                      </TableRow>\n                    )}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-between py-4\">\n              <div className=\"flex items-center gap-6\">\n                <div className=\"text-foreground text-sm\">\n                  {totalRows > 0\n                    ? finalLabels.showing\n                        .replace(`\\${from}`, fromRow.toString())\n                        .replace(`\\${to}`, toRow.toString())\n                        .replace(`\\${total}`, totalRows.toString())\n                    : finalLabels.noResults}\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-foreground\">\n                    {finalLabels.rowsPerPage}\n                  </span>\n                  <Select\n                    value={currentPageSize.toString()}\n                    onValueChange={(value) => {\n                      table.setPageSize(Number(value));\n                    }}\n                  >\n                    <SelectTrigger className=\"w-[70px]\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {pageSizeOptions.map((size) => (\n                        <SelectItem key={size} value={size.toString()}>\n                          {size}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n              <div className=\"space-x-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  {finalLabels.previousButton}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  {finalLabels.nextButton}\n                </Button>\n              </div>\n            </div>\n          </div>\n        );\n      }}\n    </TableWrapper>\n  );\n}\n"],"mappings":"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"}

package/dist/react/table/empty.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/table/empty.tsx
+function EmptyState() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full p-8 text-center",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No data available"
+		})
+	});
+}
+
+//#endregion
+export { EmptyState };
+//# sourceMappingURL=empty.js.map

package/dist/react/table/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":[],"sources":["../../../src/react/table/empty.tsx"],"sourcesContent":["export function EmptyState() {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-muted-foreground\">No data available</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,aAAa;AAC3B,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAE,WAAU;aAAgC;IAAqB;GAC9D"}

package/dist/react/table/error.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/table/error.tsx
+function ErrorState({ error }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full p-8 text-center",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-sm text-destructive",
+			children: ["Error loading table: ", error]
+		})
+	});
+}
+
+//#endregion
+export { ErrorState };
+//# sourceMappingURL=error.js.map

package/dist/react/table/error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.js","names":[],"sources":["../../../src/react/table/error.tsx"],"sourcesContent":["export function ErrorState({ error }: { error: string }) {\n  return (\n    <div className=\"w-full p-8 text-center\">\n      <p className=\"text-sm text-destructive\">Error loading table: {error}</p>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,WAAW,EAAE,SAA4B;AACvD,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAE,WAAU;cAA2B,yBAAsB;IAAU;GACpE"}

package/dist/react/table/index.js

@@ -0,0 +1 @@
+import { DataTable } from "./data-table.js";

package/dist/react/table/loading.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/table/loading.tsx
+function LoadingSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-3 mt-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mt-4",
+				children: [/* @__PURE__ */ jsx("div", { className: "h-10 bg-muted rounded animate-pulse flex-1 max-w-sm" }), /* @__PURE__ */ jsx("div", { className: "h-10 bg-muted rounded animate-pulse w-24 ml-auto" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rounded-md border overflow-hidden",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "border-b bg-secondary p-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-4",
+						children: [
+							/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded animate-pulse flex-1" }),
+							/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded animate-pulse flex-1" }),
+							/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded animate-pulse flex-1" })
+						]
+					})
+				}), Array.from({ length: 5 }).map(() => /* @__PURE__ */ jsx("div", {
+					className: "border-b p-4 last:border-b-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-4",
+						children: [
+							/* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded animate-pulse flex-1" }),
+							/* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded animate-pulse flex-1" }),
+							/* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded animate-pulse flex-1" })
+						]
+					})
+				}, `loading-row-${Math.random()}`))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded animate-pulse w-32" }),
+					/* @__PURE__ */ jsx("div", { className: "h-9 bg-muted rounded animate-pulse w-20" }),
+					/* @__PURE__ */ jsx("div", { className: "h-9 bg-muted rounded animate-pulse w-20" })
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { LoadingSkeleton };
+//# sourceMappingURL=loading.js.map

package/dist/react/table/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","names":[],"sources":["../../../src/react/table/loading.tsx"],"sourcesContent":["export function LoadingSkeleton() {\n  return (\n    <div className=\"w-full space-y-3 mt-2\">\n      <div className=\"flex items-center gap-2 mt-4\">\n        <div className=\"h-10 bg-muted rounded animate-pulse flex-1 max-w-sm\" />\n        <div className=\"h-10 bg-muted rounded animate-pulse w-24 ml-auto\" />\n      </div>\n\n      <div className=\"rounded-md border overflow-hidden\">\n        <div className=\"border-b bg-secondary p-4\">\n          <div className=\"flex gap-4\">\n            <div className=\"h-8 bg-muted rounded animate-pulse flex-1\" />\n            <div className=\"h-8 bg-muted rounded animate-pulse flex-1\" />\n            <div className=\"h-8 bg-muted rounded animate-pulse flex-1\" />\n          </div>\n        </div>\n\n        {Array.from({ length: 5 }).map(() => (\n          <div\n            key={`loading-row-${Math.random()}`}\n            className=\"border-b p-4 last:border-b-0\"\n          >\n            <div className=\"flex gap-4\">\n              <div className=\"h-6 bg-muted rounded animate-pulse flex-1\" />\n              <div className=\"h-6 bg-muted rounded animate-pulse flex-1\" />\n              <div className=\"h-6 bg-muted rounded animate-pulse flex-1\" />\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"flex items-center justify-end gap-2\">\n        <div className=\"h-4 bg-muted rounded animate-pulse w-32\" />\n        <div className=\"h-9 bg-muted rounded animate-pulse w-20\" />\n        <div className=\"h-9 bg-muted rounded animate-pulse w-20\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,kBAAkB;AAChC,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAI,WAAU;eACb,oBAAC,SAAI,WAAU,wDAAwD,EACvE,oBAAC,SAAI,WAAU,qDAAqD;KAChE;GAEN,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,oBAAC,SAAI,WAAU,8CAA8C;OAC7D,oBAAC,SAAI,WAAU,8CAA8C;OAC7D,oBAAC,SAAI,WAAU,8CAA8C;;OACzD;MACF,EAEL,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,UACzB,oBAAC;KAEC,WAAU;eAEV,qBAAC;MAAI,WAAU;;OACb,oBAAC,SAAI,WAAU,8CAA8C;OAC7D,oBAAC,SAAI,WAAU,8CAA8C;OAC7D,oBAAC,SAAI,WAAU,8CAA8C;;OACzD;OAPD,eAAe,KAAK,QAAQ,GAQ7B,CACN;KACE;GAEN,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,4CAA4C;KAC3D,oBAAC,SAAI,WAAU,4CAA4C;KAC3D,oBAAC,SAAI,WAAU,4CAA4C;;KACvD;;GACF"}

package/dist/react/table/table-wrapper.js

@@ -0,0 +1,143 @@
+import { useAnalyticsQuery } from "../hooks/use-analytics-query.js";
+import { SAFE_KEY_REGEX, formatChartValue, formatFieldLabel } from "../lib/format.js";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { EmptyState } from "./empty.js";
+import { ErrorState } from "./error.js";
+import { LoadingSkeleton } from "./loading.js";
+import "../index.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { ArrowUpDown } from "lucide-react";
+
+//#region src/react/table/table-wrapper.tsx
+const CHECKBOX_COLUMN_WIDTH = 40;
+/**
+* Wrapper component for tables with automatic data fetching and state management
+* This component handles:
+* - Data fetching via useAnalyticsQuery
+* - Loading, error, and empty states with proper UI components
+* - Data transformation (optional)
+* - Dynamic column generation from data structure
+* - TanStack Table instance creation with all features (sorting, filtering, pagination, etc.)
+*
+* @template TRaw - The raw data type returned by the analytics query
+* @template TProcessed - The processed data type after transformation
+*
+* @param props - Props for the TableWrapper component
+* @param props.queryKey - The query key to fetch the data
+* @param props.parameters - The parameters to pass to the query
+* @param props.transformer - Optional function to transform raw data before creating table
+* @param props.children - Render function that receives the TanStack Table instance
+* @param props.className - Optional CSS class name for the wrapper
+* @param props.ariaLabel - Optional accessibility label
+* @param props.testId - Optional test ID for testing
+*
+* @returns The rendered table with state management
+*/
+function TableWrapper(props) {
+	const { queryKey, parameters, transformer, children, className, ariaLabel, testId, enableRowSelection = false, onRowSelectionChange, pageSize = 10 } = props;
+	const [sorting, setSorting] = useState([]);
+	const [columnFilters, setColumnFilters] = useState([]);
+	const [columnVisibility, setColumnVisibility] = useState({});
+	const [rowSelection, setRowSelection] = useState({});
+	const { data, loading, error } = useAnalyticsQuery(queryKey, parameters);
+	useEffect(() => {
+		if (onRowSelectionChange && enableRowSelection) onRowSelectionChange(rowSelection);
+	}, [
+		rowSelection,
+		onRowSelectionChange,
+		enableRowSelection
+	]);
+	const hasData = data && data.length > 0;
+	const processedData = hasData ? transformer ? transformer(data) : data : [];
+	const table = useReactTable({
+		data: processedData,
+		columns: useMemo(() => {
+			if (!hasData) return [];
+			if (!processedData[0] || typeof processedData[0] !== "object") {
+				console.warn("Invalid data format for DataTable");
+				return [];
+			}
+			const dataColumns = Object.keys(processedData[0]).filter((key) => SAFE_KEY_REGEX.test(key)).map((key) => {
+				const formattedLabel = formatFieldLabel(key);
+				return {
+					accessorKey: key,
+					header: ({ column }) => {
+						return /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+							className: "h-8 px-2",
+							children: [formattedLabel, /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })]
+						});
+					},
+					cell: ({ row }) => {
+						const value = row.getValue(key);
+						if (typeof value === "number" || Number.isFinite(Number(value))) return /* @__PURE__ */ jsx("div", {
+							className: "text-right font-mono",
+							children: formatChartValue(Number(value), key)
+						});
+						return /* @__PURE__ */ jsx("div", { children: String(value) });
+					}
+				};
+			});
+			if (enableRowSelection) return [{
+				id: "select",
+				maxSize: CHECKBOX_COLUMN_WIDTH,
+				minSize: CHECKBOX_COLUMN_WIDTH,
+				header: ({ table: table$1 }) => /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: table$1.getIsAllPageRowsSelected() || table$1.getIsSomePageRowsSelected() && "indeterminate",
+						onCheckedChange: (value) => table$1.toggleAllPageRowsSelected(!!value),
+						"aria-label": "Select all"
+					})
+				}),
+				cell: ({ row }) => /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: row.getIsSelected(),
+						onCheckedChange: (value) => row.toggleSelected(!!value),
+						"aria-label": "Select row"
+					})
+				}),
+				enableSorting: false,
+				enableHiding: false
+			}, ...dataColumns];
+			return dataColumns;
+		}, [
+			hasData,
+			processedData,
+			enableRowSelection
+		]),
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection
+		},
+		initialState: { pagination: { pageSize } }
+	});
+	if (loading) return /* @__PURE__ */ jsx(LoadingSkeleton, {});
+	if (error) return /* @__PURE__ */ jsx(ErrorState, { error: typeof error === "string" ? error : "Unknown error" });
+	if (!hasData) return /* @__PURE__ */ jsx(EmptyState, {});
+	return /* @__PURE__ */ jsx("section", {
+		className,
+		"aria-label": ariaLabel,
+		"data-testid": testId,
+		children: children(table)
+	});
+}
+
+//#endregion
+export { TableWrapper };
+//# sourceMappingURL=table-wrapper.js.map

package/dist/react/table/table-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-wrapper.js","names":["table"],"sources":["../../../src/react/table/table-wrapper.tsx"],"sourcesContent":["import {\n  type Column,\n  type ColumnFiltersState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type Row,\n  type RowSelectionState,\n  type SortingState,\n  type Table,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport { ArrowUpDown } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useAnalyticsQuery } from \"..\";\nimport {\n  formatChartValue,\n  formatFieldLabel,\n  SAFE_KEY_REGEX,\n} from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport { Checkbox } from \"../ui/checkbox\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { TableWrapperProps } from \"./types\";\n\nconst CHECKBOX_COLUMN_WIDTH = 40;\n\n/**\n * Wrapper component for tables with automatic data fetching and state management\n * This component handles:\n * - Data fetching via useAnalyticsQuery\n * - Loading, error, and empty states with proper UI components\n * - Data transformation (optional)\n * - Dynamic column generation from data structure\n * - TanStack Table instance creation with all features (sorting, filtering, pagination, etc.)\n *\n * @template TRaw - The raw data type returned by the analytics query\n * @template TProcessed - The processed data type after transformation\n *\n * @param props - Props for the TableWrapper component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query\n * @param props.transformer - Optional function to transform raw data before creating table\n * @param props.children - Render function that receives the TanStack Table instance\n * @param props.className - Optional CSS class name for the wrapper\n * @param props.ariaLabel - Optional accessibility label\n * @param props.testId - Optional test ID for testing\n *\n * @returns The rendered table with state management\n */\nexport function TableWrapper<TRaw = any, TProcessed = any>(\n  props: TableWrapperProps<TRaw, TProcessed>,\n) {\n  const {\n    queryKey,\n    parameters,\n    transformer,\n    children,\n    className,\n    ariaLabel,\n    testId,\n    enableRowSelection = false,\n    onRowSelectionChange,\n    pageSize = 10,\n  } = props;\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n  const { data, loading, error } = useAnalyticsQuery<TRaw[]>(\n    queryKey,\n    parameters,\n  );\n\n  useEffect(() => {\n    if (onRowSelectionChange && enableRowSelection) {\n      onRowSelectionChange(rowSelection);\n    }\n  }, [rowSelection, onRowSelectionChange, enableRowSelection]);\n\n  const hasData = data && data.length > 0;\n\n  const processedData = hasData\n    ? transformer\n      ? transformer(data)\n      : (data as unknown as TProcessed[])\n    : [];\n\n  const tableColumns = useMemo(() => {\n    if (!hasData) return [];\n\n    if (!processedData[0] || typeof processedData[0] !== \"object\") {\n      console.warn(\"Invalid data format for DataTable\");\n      return [];\n    }\n\n    const dataColumns = Object.keys(processedData[0] as object)\n      .filter((key) => SAFE_KEY_REGEX.test(key))\n      .map((key) => {\n        const formattedLabel = formatFieldLabel(key);\n        return {\n          accessorKey: key,\n          header: ({ column }: { column: Column<TProcessed> }) => {\n            return (\n              <Button\n                variant=\"ghost\"\n                onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n                }\n                className=\"h-8 px-2\"\n              >\n                {formattedLabel}\n                <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n              </Button>\n            );\n          },\n          cell: ({ row }: { row: Row<TProcessed> }) => {\n            const value = row.getValue(key);\n            if (typeof value === \"number\" || Number.isFinite(Number(value))) {\n              return (\n                <div className=\"text-right font-mono\">\n                  {formatChartValue(Number(value), key)}\n                </div>\n              );\n            }\n            return <div>{String(value)}</div>;\n          },\n        };\n      });\n\n    if (enableRowSelection) {\n      return [\n        {\n          id: \"select\",\n          maxSize: CHECKBOX_COLUMN_WIDTH,\n          minSize: CHECKBOX_COLUMN_WIDTH,\n          header: ({ table }: { table: Table<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && \"indeterminate\")\n                }\n                onCheckedChange={(value) =>\n                  table.toggleAllPageRowsSelected(!!value)\n                }\n                aria-label=\"Select all\"\n              />\n            </div>\n          ),\n          cell: ({ row }: { row: Row<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={row.getIsSelected()}\n                onCheckedChange={(value) => row.toggleSelected(!!value)}\n                aria-label=\"Select row\"\n              />\n            </div>\n          ),\n          enableSorting: false,\n          enableHiding: false,\n        },\n        ...dataColumns,\n      ];\n    }\n\n    return dataColumns;\n  }, [hasData, processedData, enableRowSelection]);\n\n  const table = useReactTable({\n    data: processedData,\n    columns: tableColumns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n    initialState: {\n      pagination: {\n        pageSize: pageSize,\n      },\n    },\n  });\n\n  if (loading) return <LoadingSkeleton />;\n  if (error)\n    return (\n      <ErrorState error={typeof error === \"string\" ? error : \"Unknown error\"} />\n    );\n\n  if (!hasData) return <EmptyState />;\n\n  return (\n    <section className={className} aria-label={ariaLabel} data-testid={testId}>\n      {children(table)}\n    </section>\n  );\n}\n"],"mappings":"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"}