@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/data-table/DataTable.types.d.ts

@@ -0,0 +1,203 @@
+import { TableActionItem } from "./TableAction.js";
+import { TableActionMenuItem } from "./TableActionMenu.js";
+import { FilterConfig, LogicalFilterOperator } from "./toolbarItems/filters/types.js";
+import { BaseTableProps } from "./BaseTable.js";
+import { BaseRecord, CrudFilter, CrudSorting, useTableProps, useTableReturnType } from "@refinedev/core";
+import { Table } from "@tanstack/react-table";
+
+//#region src/components/data-table/DataTable.types.d.ts
+declare enum ToolbarItemAlignment {
+  LEFT = "left",
+  RIGHT = "right",
+  CENTER = "center"
+}
+interface BaseToolbarItem {
+  /** Unique identifier for the toolbar item */
+  id: string;
+  /** Type of the toolbar item */
+  type: ToolbarItemType;
+  /** Optional order for positioning items in toolbar */
+  order?: number;
+  /** Alignment for this specific item */
+  alignment?: ToolbarItemAlignment;
+}
+declare enum ToolbarItemType {
+  ACTION = "action",
+  CUSTOM = "custom",
+  FILTER = "filter",
+  SEPARATOR = "separator",
+  FILTER_GROUP = "filter-group"
+}
+declare enum TableLayoutType {
+  TABLE = "table",
+  STACKED = "stacked",
+  AUTO = "auto"
+}
+interface ToolbarRefineContext<TData extends BaseRecord> {
+  /** The Refine table instance */
+  tableInstance: useTableReturnType<TData, any>;
+  /** Function to refetch data */
+  refetch: () => void;
+  /** Whether data is currently being fetched */
+  isLoading: boolean;
+  /** Any errors from data fetching */
+  error?: any;
+}
+interface TableContext<TData> {
+  /** Set table filters */
+  setFilters?: (filters: CrudFilter[]) => void;
+  /** Set table sorters */
+  setSorters?: (sorters: CrudSorting) => void;
+  /** Refine table query object */
+  tableQuery?: any;
+  /** Current filters state */
+  filters?: CrudFilter[];
+  /** Current sorters state */
+  sorters?: CrudSorting;
+}
+interface ToolbarItemComponentProps<TData extends BaseRecord> {
+  /** The table instance */
+  table: Table<TData>;
+  /** Current value of the item (for filters) */
+  value?: any;
+  /** Handler to update the item value (for filters) */
+  onChange?: (value: any) => void;
+  /** Optional Refine table contexts - only available when using DataTable with Refine */
+  refineContext?: ToolbarRefineContext<TData>;
+  /** Enhanced table contexts with filter management helpers */
+  context?: TableContext<TData>;
+}
+interface ToolbarActionItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.ACTION;
+  /** Label for the action button */
+  label: string;
+  /** Icon for the action button */
+  icon?: React.ComponentType<{
+    className?: string;
+  }> | React.ReactNode;
+  /** Click handler for the action */
+  onClick: (props: ToolbarItemComponentProps<TData>) => void;
+  /** Whether the action is disabled */
+  disabled?: boolean;
+  /** Tooltip text for the action */
+  tooltip?: string;
+  /** Variant style for the button */
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  /** Size of the button */
+  size?: "default" | "sm" | "lg" | "icon";
+  /** Class name for the button */
+  className?: string;
+}
+interface ToolbarFilterItem<TData extends BaseRecord> extends BaseToolbarItem {
+  type: ToolbarItemType.FILTER;
+  /** Label for the filter */
+  label: string;
+  /** Field name in the data model to filter on - defaults to id if not provided */
+  field?: keyof TData;
+  /** The filter component to render - either direct component or registered type string */
+  component?: React.ComponentType<ToolbarItemComponentProps<TData>> | string;
+  /** Initial value for the filter */
+  initialValue?: any;
+  /** Filter-specific configuration - now required and contains all necessary properties */
+  config: FilterConfig<TData>;
+}
+interface ToolbarSeparatorItem extends BaseToolbarItem {
+  type: ToolbarItemType.SEPARATOR;
+}
+interface ToolbarFilterGroupItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.FILTER_GROUP;
+  /** Label for the filter group */
+  label: string;
+  /** Icon for the filter group (defaults to Filter icon) */
+  icon?: React.ReactNode;
+  /** Filter items contained within this group */
+  items: ToolbarFilterItem<TData>[];
+  /** Whether the group is initially expanded */
+  initiallyExpanded?: boolean;
+  /** Layout direction for filter items */
+  layout?: "horizontal" | "vertical";
+  /** Optional custom class name for the group container */
+  className?: string;
+  /** Whether to use dropdown style expansion instead of inline */
+  dropdownStyle?: boolean;
+}
+interface ToolbarCustomItem<TData extends BaseRecord = any> extends BaseToolbarItem {
+  type: ToolbarItemType.CUSTOM;
+  /** Custom component to render */
+  component: React.ComponentType<ToolbarItemComponentProps<TData>>;
+  /** Optional class name for the container */
+  className?: string;
+}
+type ExtendedToolbarItem<TData extends BaseRecord> = ToolbarItem<TData> | (BaseToolbarItem & {
+  component?: React.ComponentType<ToolbarItemComponentProps<TData>>;
+});
+type ToolbarItem<TData extends BaseRecord> = ToolbarActionItem<TData> | ToolbarFilterItem<TData> | ToolbarSeparatorItem | ToolbarFilterGroupItem<TData> | ToolbarCustomItem<TData>;
+interface ToolbarFilterComponentProps<TData extends BaseRecord> extends ToolbarItemComponentProps<TData> {
+  /** Column information if the filter is tied to a specific column */
+  column?: keyof TData;
+  /** Filter configuration */
+  config?: FilterConfig<TData>;
+  /** Label from the filter item (not config) */
+  itemLabel?: string;
+  /** Function to get available operators for a field */
+  getAvailableOperators?: (field?: string) => LogicalFilterOperator[];
+}
+interface ToolbarConfig<TData extends BaseRecord> {
+  /** Items to display in the toolbar */
+  items: ToolbarItem<TData>[];
+  /** Whether the toolbar should be sticky */
+  sticky?: boolean;
+  /** Custom class name for the toolbar container */
+  className?: string;
+  /** Default alignment for all toolbar items */
+  defaultAlignment?: ToolbarItemAlignment;
+  /** Whether to automatically distribute space between left and right aligned items */
+  justifyBetween?: boolean;
+  /** Mobile breakpoint configuration */
+  mobileBreakpoint?: string;
+}
+interface DataTableActionMenuProps<TData> {
+  items: TableActionMenuItem<TData>[];
+  label?: string;
+  /**
+   * Action items to display as individual buttons
+   */
+  actionItems?: TableActionItem<TData>[];
+}
+interface DataTableProps<TData extends BaseRecord = BaseRecord, TError = unknown, TSearchVariables = unknown> extends Omit<BaseTableProps<TData>, "actionColumn" | "data" | "tableOptions"> {
+  /**
+   * Configuration for action menu items
+   */
+  actionMenu?: DataTableActionMenuProps<TData>;
+  /**
+   * Configuration for toolbar items
+   */
+  toolbar?: ToolbarConfig<TData>;
+  /**
+   * The dataProvider name if not using the default one
+   * @default "default"
+   */
+  dataProviderName?: string;
+  /**
+   * Configuration options for refine's useTable hook
+   */
+  refineCoreProps?: Omit<useTableProps<TData, TError, TSearchVariables>, "columns" | "dataProviderName" | "resource">;
+  /**
+   * The resource name for API data interactions
+   * @example "posts", "users", "products"
+   */
+  resource: string;
+  /**
+   * Interval (in milliseconds) for automatic data refetching
+   * This value gets passed to React Query through refineCoreProps
+   */
+  refetchInterval?: number;
+  /**
+   * Custom control elements to render above the table, typically used for DataTableController
+   * or other custom control components that need access to table controls
+   */
+  control?: React.ReactNode;
+}
+//#endregion
+export { BaseToolbarItem, DataTableActionMenuProps, DataTableProps, ExtendedToolbarItem, TableContext, TableLayoutType, ToolbarActionItem, ToolbarConfig, ToolbarCustomItem, ToolbarFilterComponentProps, ToolbarFilterGroupItem, ToolbarFilterItem, ToolbarItem, ToolbarItemAlignment, ToolbarItemComponentProps, ToolbarItemType, ToolbarRefineContext, ToolbarSeparatorItem };
+//# sourceMappingURL=DataTable.types.d.ts.map

package/dist/esm/components/data-table/DataTable.types.js

@@ -0,0 +1,25 @@
+//#region src/components/data-table/DataTable.types.ts
+let ToolbarItemAlignment = /* @__PURE__ */ function(ToolbarItemAlignment) {
+	ToolbarItemAlignment["LEFT"] = "left";
+	ToolbarItemAlignment["RIGHT"] = "right";
+	ToolbarItemAlignment["CENTER"] = "center";
+	return ToolbarItemAlignment;
+}({});
+let ToolbarItemType = /* @__PURE__ */ function(ToolbarItemType) {
+	ToolbarItemType["ACTION"] = "action";
+	ToolbarItemType["CUSTOM"] = "custom";
+	ToolbarItemType["FILTER"] = "filter";
+	ToolbarItemType["SEPARATOR"] = "separator";
+	ToolbarItemType["FILTER_GROUP"] = "filter-group";
+	return ToolbarItemType;
+}({});
+let TableLayoutType = /* @__PURE__ */ function(TableLayoutType) {
+	TableLayoutType["TABLE"] = "table";
+	TableLayoutType["STACKED"] = "stacked";
+	TableLayoutType["AUTO"] = "auto";
+	return TableLayoutType;
+}({});
+
+//#endregion
+export { TableLayoutType, ToolbarItemAlignment, ToolbarItemType };
+//# sourceMappingURL=DataTable.types.js.map

package/dist/esm/components/data-table/DataTable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import {\n  useTableReturnType,\n  type BaseRecord,\n  type CrudFilter,\n  type CrudSorting,\n  type useTableProps as useTablePropsCore,\n} from \"@refinedev/core\";\nimport { Table } from \"@tanstack/react-table\";\nimport { UseTableReturnType } from \"@refinedev/react-table\";\n\nimport type { BaseTableProps } from \"./BaseTable\";\n\nimport { TableActionItem } from \"./TableAction\";\nimport { TableActionMenuItem } from \"./TableActionMenu\";\nimport {\n  FilterConfig,\n  LogicalFilterOperator,\n} from \"./toolbarItems/filters/types\";\n\n// Alignment options for toolbar items\nexport enum ToolbarItemAlignment {\n  LEFT = \"left\",\n  RIGHT = \"right\",\n  CENTER = \"center\",\n}\n\n// Base toolbar item interface\nexport interface BaseToolbarItem {\n  /** Unique identifier for the toolbar item */\n  id: string;\n  /** Type of the toolbar item */\n  type: ToolbarItemType;\n  /** Optional order for positioning items in toolbar */\n  order?: number;\n  /** Alignment for this specific item */\n  alignment?: ToolbarItemAlignment;\n}\n\n// Toolbar item types\nexport enum ToolbarItemType {\n  ACTION = \"action\",\n  CUSTOM = \"custom\",\n  FILTER = \"filter\",\n  SEPARATOR = \"separator\",\n  FILTER_GROUP = \"filter-group\",\n}\n\n// Table layout types\nexport enum TableLayoutType {\n  TABLE = \"table\",\n  STACKED = \"stacked\",\n  AUTO = \"auto\",\n}\n\n// Refine contexts for toolbar items\nexport interface ToolbarRefineContext<TData extends BaseRecord> {\n  /** The Refine table instance */\n  tableInstance: useTableReturnType<TData, any>;\n  /** Function to refetch data */\n  refetch: () => void;\n  /** Whether data is currently being fetched */\n  isLoading: boolean;\n  /** Any errors from data fetching */\n  error?: any;\n}\n\n// Table contexts for enhanced functionality\nexport interface TableContext<TData> {\n  /** Set table filters */\n  setFilters?: (filters: CrudFilter[]) => void;\n  /** Set table sorters */\n  setSorters?: (sorters: CrudSorting) => void;\n  /** Refine table query object */\n  tableQuery?: any;\n  /** Current filters state */\n  filters?: CrudFilter[];\n  /** Current sorters state */\n  sorters?: CrudSorting;\n}\n\n// Base props for all toolbar item components\nexport interface ToolbarItemComponentProps<TData extends BaseRecord> {\n  /** The table instance */\n  table: Table<TData>;\n  /** Current value of the item (for filters) */\n  value?: any;\n  /** Handler to update the item value (for filters) */\n  onChange?: (value: any) => void;\n  /** Optional Refine table contexts - only available when using DataTable with Refine */\n  refineContext?: ToolbarRefineContext<TData>;\n  /** Enhanced table contexts with filter management helpers */\n  context?: TableContext<TData>;\n}\n\n// Action item types for toolbar buttons\nexport interface ToolbarActionItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.ACTION;\n  /** Label for the action button */\n  label: string;\n  /** Icon for the action button */\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  /** Click handler for the action */\n  onClick: (props: ToolbarItemComponentProps<TData>) => void;\n  /** Whether the action is disabled */\n  disabled?: boolean;\n  /** Tooltip text for the action */\n  tooltip?: string;\n  /** Variant style for the button */\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"link\";\n  /** Size of the button */\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\n  /** Class name for the button */\n  className?: string;\n}\n\n// Filter item types\nexport interface ToolbarFilterItem<TData extends BaseRecord>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.FILTER;\n  /** Label for the filter */\n  label: string;\n  /** Field name in the data model to filter on - defaults to id if not provided */\n  field?: keyof TData;\n  /** The filter component to render - either direct component or registered type string */\n  component?: React.ComponentType<ToolbarItemComponentProps<TData>> | string;\n  /** Initial value for the filter */\n  initialValue?: any;\n  /** Filter-specific configuration - now required and contains all necessary properties */\n  config: FilterConfig<TData>;\n}\n\n// Separator item type\nexport interface ToolbarSeparatorItem extends BaseToolbarItem {\n  type: ToolbarItemType.SEPARATOR;\n}\n\n// Filter group item type\nexport interface ToolbarFilterGroupItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.FILTER_GROUP;\n  /** Label for the filter group */\n  label: string;\n  /** Icon for the filter group (defaults to Filter icon) */\n  icon?: React.ReactNode;\n  /** Filter items contained within this group */\n  items: ToolbarFilterItem<TData>[];\n  /** Whether the group is initially expanded */\n  initiallyExpanded?: boolean;\n  /** Layout direction for filter items */\n  layout?: \"horizontal\" | \"vertical\";\n  /** Optional custom class name for the group container */\n  className?: string;\n  /** Whether to use dropdown style expansion instead of inline */\n  dropdownStyle?: boolean;\n}\n\n// Custom item type for toolbar\nexport interface ToolbarCustomItem<TData extends BaseRecord = any>\n  extends BaseToolbarItem {\n  type: ToolbarItemType.CUSTOM;\n  /** Custom component to render */\n  component: React.ComponentType<ToolbarItemComponentProps<TData>>;\n  /** Optional class name for the container */\n  className?: string;\n}\n\n// Extended toolbar item type\nexport type ExtendedToolbarItem<TData extends BaseRecord> =\n  | ToolbarItem<TData>\n  | (BaseToolbarItem & {\n      component?: React.ComponentType<ToolbarItemComponentProps<TData>>;\n    });\n\n// Union type for all toolbar items\nexport type ToolbarItem<TData extends BaseRecord> =\n  | ToolbarActionItem<TData>\n  | ToolbarFilterItem<TData>\n  | ToolbarSeparatorItem\n  | ToolbarFilterGroupItem<TData>\n  | ToolbarCustomItem<TData>;\n\n// Props for filter components (extends base interface)\nexport interface ToolbarFilterComponentProps<TData extends BaseRecord>\n  extends ToolbarItemComponentProps<TData> {\n  /** Column information if the filter is tied to a specific column */\n  column?: keyof TData;\n  /** Filter configuration */\n  config?: FilterConfig<TData>;\n  /** Label from the filter item (not config) */\n  itemLabel?: string;\n  /** Function to get available operators for a field */\n  getAvailableOperators?: (field?: string) => LogicalFilterOperator[];\n}\n\n// Toolbar configuration types\nexport interface ToolbarConfig<TData extends BaseRecord> {\n  /** Items to display in the toolbar */\n  items: ToolbarItem<TData>[];\n  /** Whether the toolbar should be sticky */\n  sticky?: boolean;\n  /** Custom class name for the toolbar container */\n  className?: string;\n  /** Default alignment for all toolbar items */\n  defaultAlignment?: ToolbarItemAlignment;\n  /** Whether to automatically distribute space between left and right aligned items */\n  justifyBetween?: boolean;\n  /** Mobile breakpoint configuration */\n  mobileBreakpoint?: string;\n}\n\nexport interface DataTableActionMenuProps<TData> {\n  items: TableActionMenuItem<TData>[];\n  label?: string;\n  /**\n   * Action items to display as individual buttons\n   */\n  actionItems?: TableActionItem<TData>[];\n}\n\nexport interface DataTableProps<\n  TData extends BaseRecord = BaseRecord,\n  TError = unknown,\n  TSearchVariables = unknown,\n> extends Omit<\n    BaseTableProps<TData>,\n    \"actionColumn\" | \"data\" | \"tableOptions\"\n  > {\n  /**\n   * Configuration for action menu items\n   */\n  actionMenu?: DataTableActionMenuProps<TData>;\n  /**\n   * Configuration for toolbar items\n   */\n  toolbar?: ToolbarConfig<TData>;\n  /**\n   * The dataProvider name if not using the default one\n   * @default \"default\"\n   */\n  dataProviderName?: string;\n  /**\n   * Configuration options for refine's useTable hook\n   */\n  refineCoreProps?: Omit<\n    useTablePropsCore<TData, TError, TSearchVariables>,\n    \"columns\" | \"dataProviderName\" | \"resource\"\n  >;\n  /**\n   * The resource name for API data interactions\n   * @example \"posts\", \"users\", \"products\"\n   */\n  resource: string;\n  /**\n   * Interval (in milliseconds) for automatic data refetching\n   * This value gets passed to React Query through refineCoreProps\n   */\n  refetchInterval?: number;\n  /**\n   * Custom control elements to render above the table, typically used for DataTableController\n   * or other custom control components that need access to table controls\n   */\n  control?: React.ReactNode;\n}\n"],"mappings":";AAoBA,IAAY,uBAAL;AACL;AACA;AACA;;KACD;AAeD,IAAY,kBAAL;AACL;AACA;AACA;AACA;AACA;;KACD;AAGD,IAAY,kBAAL;AACL;AACA;AACA;;KACD"}

package/dist/esm/components/data-table/DataTableController.d.ts

@@ -0,0 +1,19 @@
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DataTableController.d.ts
+interface TableControls<TData extends BaseRecord = BaseRecord> {
+  setFilters: (filters: any[]) => void;
+  setSorters: (sorters: any[]) => void;
+  refetch: () => void;
+  getCurrentFilters: () => any[];
+  getCurrentSorters: () => any[];
+}
+interface DataTableControllerProps<TData extends BaseRecord = BaseRecord> {
+  onControlsReady?: (controls: TableControls<TData>) => void;
+}
+declare function DataTableController<TData extends BaseRecord = BaseRecord>({
+  onControlsReady
+}: DataTableControllerProps<TData>): null;
+//#endregion
+export { DataTableController, DataTableControllerProps, TableControls };
+//# sourceMappingURL=DataTableController.d.ts.map

package/dist/esm/components/data-table/DataTableController.js

@@ -0,0 +1,31 @@
+"use client";
+
+import { useRefineTable } from "./contexts/RefineTable.js";
+import "./contexts/index.js";
+import { useEffect } from "react";
+
+//#region src/components/data-table/DataTableController.tsx
+function DataTableController({ onControlsReady }) {
+	const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable();
+	useEffect(() => {
+		if (setFilters && setSorters && tableQuery?.refetch && onControlsReady) onControlsReady({
+			setFilters,
+			setSorters,
+			refetch: tableQuery.refetch,
+			getCurrentFilters: () => filters || [],
+			getCurrentSorters: () => sorters || []
+		});
+	}, [
+		setFilters,
+		setSorters,
+		tableQuery,
+		filters,
+		sorters,
+		onControlsReady
+	]);
+	return null;
+}
+
+//#endregion
+export { DataTableController };
+//# sourceMappingURL=DataTableController.js.map

package/dist/esm/components/data-table/DataTableController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableController.js","names":[],"sources":["../../../../src/components/data-table/DataTableController.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect } from \"react\";\nimport { useRefineTable } from \"./contexts\";\nimport type { BaseRecord } from \"@refinedev/core\";\n\nexport interface TableControls<TData extends BaseRecord = BaseRecord> {\n  setFilters: (filters: any[]) => void;\n  setSorters: (sorters: any[]) => void;\n  refetch: () => void;\n  getCurrentFilters: () => any[];\n  getCurrentSorters: () => any[];\n}\n\nexport interface DataTableControllerProps<TData extends BaseRecord = BaseRecord> {\n  onControlsReady?: (controls: TableControls<TData>) => void;\n}\n\nexport function DataTableController<TData extends BaseRecord = BaseRecord>({\n  onControlsReady,\n}: DataTableControllerProps<TData>) {\n  const { setFilters, setSorters, tableQuery, filters, sorters } = useRefineTable<TData>();\n\n  useEffect(() => {\n    if (setFilters && setSorters && tableQuery?.refetch && onControlsReady) {\n      const controls: TableControls<TData> = {\n        setFilters,\n        setSorters,\n        refetch: tableQuery.refetch,\n        getCurrentFilters: () => filters || [],\n        getCurrentSorters: () => sorters || [],\n      };\n      \n      onControlsReady(controls);\n    }\n  }, [setFilters, setSorters, tableQuery, filters, sorters, onControlsReady]);\n\n  return null;\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,oBAA2D,EACzE,mBACkC;CAClC,MAAM,EAAE,YAAY,YAAY,YAAY,SAAS,YAAY,gBAAuB;AAExF,iBAAgB;AACd,MAAI,cAAc,cAAc,YAAY,WAAW,gBASrD,iBAAgB;GAPd;GACA;GACA,SAAS,WAAW;GACpB,yBAAyB,WAAW,EAAE;GACtC,yBAAyB,WAAW,EAAE;GAGhB,CAAC;IAE1B;EAAC;EAAY;EAAY;EAAY;EAAS;EAAS;EAAgB,CAAC;AAE3E,QAAO"}

package/dist/esm/components/data-table/DefaultPagination.d.ts

@@ -0,0 +1,7 @@
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DefaultPagination.d.ts
+declare function DefaultPagination<TData extends BaseRecord>(): any;
+//#endregion
+export { DefaultPagination };
+//# sourceMappingURL=DefaultPagination.d.ts.map

package/dist/esm/components/data-table/DefaultPagination.js

@@ -0,0 +1,62 @@
+import { useTableInstance } from "./contexts/TableInstance.js";
+import "./contexts/index.js";
+import { Button } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+//#region src/components/data-table/DefaultPagination.tsx
+function DefaultPagination() {
+	const { table } = useTableInstance();
+	const pageIndex = table.getState().pagination.pageIndex;
+	const pageCount = table.getPageCount();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-center gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					"aria-label": "First page",
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => table.setPageIndex(0),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Previous page",
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => table.previousPage(),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : "No pages"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					"aria-label": "Next page",
+					disabled: !table.getCanNextPage(),
+					onClick: () => table.nextPage(),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Last page",
+					disabled: !table.getCanNextPage(),
+					onClick: () => table.setPageIndex(Math.max(0, pageCount - 1)),
+					size: "sm",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { DefaultPagination };
+//# sourceMappingURL=DefaultPagination.js.map

package/dist/esm/components/data-table/DefaultPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPagination.js","names":[],"sources":["../../../../src/components/data-table/DefaultPagination.tsx"],"sourcesContent":["import { Button } from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { useTableInstance } from \"./contexts\";\n\nfunction DefaultPagination<TData extends BaseRecord>() {\n  const { table } = useTableInstance<TData>();\n  const pageIndex = table.getState().pagination.pageIndex;\n  const pageCount = table.getPageCount();\n\n  return (\n    <div className=\"flex items-center justify-center gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"First page\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.setPageIndex(0)}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronsLeft className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          aria-label=\"Previous page\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.previousPage()}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <span className=\"text-sm font-medium\">\n        {pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : \"No pages\"}\n      </span>\n\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"Next page\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.nextPage()}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          aria-label=\"Last page\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.setPageIndex(Math.max(0, pageCount - 1))}\n          size=\"sm\"\n          variant=\"outline\">\n          <ChevronsRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nexport { DefaultPagination };\n"],"mappings":";;;;;;;;AAYA,SAAS,oBAA8C;CACrD,MAAM,EAAE,UAAU,kBAAyB;CAC3C,MAAM,YAAY,MAAM,UAAU,CAAC,WAAW;CAC9C,MAAM,YAAY,MAAM,cAAc;AAEtC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,cAAW;KACX,UAAU,CAAC,MAAM,oBAAoB;KACrC,eAAe,MAAM,aAAa,EAAE;KACpC,MAAK;KACL,SAAQ;eACR,oBAAC,cAAD,EAAc,WAAU,WAAY;KAC7B,GACT,oBAAC,QAAD;KACE,cAAW;KACX,UAAU,CAAC,MAAM,oBAAoB;KACrC,eAAe,MAAM,cAAc;KACnC,MAAK;KACL,SAAQ;eACR,oBAAC,aAAD,EAAa,WAAU,WAAY;KAC5B,EACL;;GAEN,oBAAC,QAAD;IAAM,WAAU;cACb,YAAY,IAAI,QAAQ,YAAY,EAAE,MAAM,cAAc;IACtD;GAEP,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,cAAW;KACX,UAAU,CAAC,MAAM,gBAAgB;KACjC,eAAe,MAAM,UAAU;KAC/B,MAAK;KACL,SAAQ;eACR,oBAAC,cAAD,EAAc,WAAU,WAAY;KAC7B,GACT,oBAAC,QAAD;KACE,cAAW;KACX,UAAU,CAAC,MAAM,gBAAgB;KACjC,eAAe,MAAM,aAAa,KAAK,IAAI,GAAG,YAAY,EAAE,CAAC;KAC7D,MAAK;KACL,SAAQ;eACR,oBAAC,eAAD,EAAe,WAAU,WAAY;KAC9B,EACL;;GACF"}

package/dist/esm/components/data-table/DefaultTableLayout.d.ts

@@ -0,0 +1,28 @@
+import { BaseTableLayoutPropsBase } from "./BaseTable.js";
+import { BaseRecord } from "@refinedev/core";
+
+//#region src/components/data-table/DefaultTableLayout.d.ts
+interface DefaultTableLayoutProps<TData extends BaseRecord> extends BaseTableLayoutPropsBase<TData> {
+  emptyStateMessage?: string;
+  loadingStateMessage?: string;
+}
+declare function DefaultTableLayout<TData extends BaseRecord>({
+  table,
+  getCellProps,
+  getRowProps,
+  onRowClick,
+  className,
+  emptyState,
+  emptyStateMessage,
+  footer,
+  header,
+  isLoading,
+  loadingState,
+  loadingStateMessage,
+  pagination,
+  responsive,
+  hideColumnsOnMobile
+}: DefaultTableLayoutProps<TData>): any;
+//#endregion
+export { DefaultTableLayout };
+//# sourceMappingURL=DefaultTableLayout.d.ts.map

package/dist/esm/components/data-table/DefaultTableLayout.js

@@ -0,0 +1,70 @@
+import { useMobileColumnHiding, useTableCellHandlers, useTableHeaderCellHandlers, useTableRowHandlers } from "./useTableHandlers.js";
+import { normalizeTableOptions } from "./tableOptions.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@lumeweb/portal-framework-ui-core";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+
+//#region src/components/data-table/DefaultTableLayout.tsx
+function DefaultTableLayout({ table, getCellProps, getRowProps, onRowClick, className, emptyState, emptyStateMessage, footer, header, isLoading, loadingState, loadingStateMessage, pagination, responsive, hideColumnsOnMobile }) {
+	const getTableRowProps = useTableRowHandlers({
+		onRowClick,
+		getRowProps
+	});
+	const getTableCellProps = useTableCellHandlers({ getCellProps });
+	const getTableHeaderCellProps = useTableHeaderCellHandlers();
+	const hiddenColumns = useMobileColumnHiding({
+		responsive,
+		hideColumnsOnMobile
+	});
+	const normalizedOptions = useMemo(() => normalizeTableOptions(pagination, emptyState, emptyStateMessage, loadingState, loadingStateMessage, table), [
+		pagination,
+		emptyState,
+		emptyStateMessage,
+		loadingState,
+		loadingStateMessage,
+		table
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			header && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: header
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+					if (hiddenColumns.has(header.id)) return null;
+					return /* @__PURE__ */ jsx(TableHead, {
+						...getTableHeaderCellProps(header),
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+					}, header.id);
+				}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: isLoading ? normalizedOptions.loadingState : table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => {
+					return /* @__PURE__ */ jsx(TableRow, {
+						...getTableRowProps(row),
+						children: row.getVisibleCells().map((cell) => {
+							if (hiddenColumns.has(cell.column.id)) return null;
+							return /* @__PURE__ */ jsx(TableCell, {
+								...getTableCellProps(cell),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row.id);
+				}) : normalizedOptions.emptyState })] })
+			}),
+			normalizedOptions.pagination.enabled && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: normalizedOptions.pagination.component
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			})
+		]
+	});
+}
+
+//#endregion
+export { DefaultTableLayout };
+//# sourceMappingURL=DefaultTableLayout.js.map

package/dist/esm/components/data-table/DefaultTableLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultTableLayout.js","names":["UITable"],"sources":["../../../../src/components/data-table/DefaultTableLayout.tsx"],"sourcesContent":["import {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Table as UITable,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { flexRender, Table } from \"@tanstack/react-table\";\nimport React, { useMemo } from \"react\";\nimport { BaseRecord } from \"@refinedev/core\";\nimport {\n  useTableRowHandlers,\n  useTableCellHandlers,\n  useMobileColumnHiding,\n  useTableHeaderCellHandlers,\n} from \"./useTableHandlers\";\nimport { BaseTableLayoutPropsBase } from \"./BaseTable\";\nimport { normalizeTableOptions } from \"./tableOptions\";\n\ninterface DefaultTableLayoutProps<TData extends BaseRecord>\n  extends BaseTableLayoutPropsBase<TData> {\n  emptyStateMessage?: string;\n  loadingStateMessage?: string;\n}\n\nfunction DefaultTableLayout<TData extends BaseRecord>({\n  table,\n  getCellProps,\n  getRowProps,\n  onRowClick,\n  className,\n  emptyState,\n  emptyStateMessage,\n  footer,\n  header,\n  isLoading,\n  loadingState,\n  loadingStateMessage,\n  pagination,\n  responsive,\n  hideColumnsOnMobile,\n}: DefaultTableLayoutProps<TData>) {\n  // Use the shared hooks for row and cell handling\n  const getTableRowProps = useTableRowHandlers({ onRowClick, getRowProps });\n  const getTableCellProps = useTableCellHandlers({ getCellProps });\n  const getTableHeaderCellProps = useTableHeaderCellHandlers();\n  \n  // Get hidden columns at top level to avoid hooks violation\n  const hiddenColumns = useMobileColumnHiding({\n    responsive,\n    hideColumnsOnMobile,\n  });\n\n  // Normalize table options\n  const normalizedOptions = useMemo(\n    () =>\n      normalizeTableOptions(\n        pagination,\n        emptyState,\n        emptyStateMessage,\n        loadingState,\n        loadingStateMessage,\n        table,\n      ),\n    [\n      pagination,\n      emptyState,\n      emptyStateMessage,\n      loadingState,\n      loadingStateMessage,\n      table,\n    ]\n  );\n\n  return (\n    <div className={className}>\n      {header && <div className=\"mb-4\">{header}</div>}\n      <div className=\"rounded-md border\">\n        <UITable>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  // Check if column should be hidden using the precomputed set\n                  if (hiddenColumns.has(header.id)) {\n                    return null;\n                  }\n\n                  const headerProps = getTableHeaderCellProps(header);\n\n                  return (\n                    <TableHead key={header.id} {...headerProps}>\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            {isLoading\n              ? normalizedOptions.loadingState\n              : table.getRowModel().rows.length > 0\n                ? table.getRowModel().rows.map((row) => {\n                    // Use the shared hook for row props\n                    const rowProps = getTableRowProps(row);\n\n                    return (\n                      <TableRow key={row.id} {...rowProps}>\n                        {row.getVisibleCells().map((cell) => {\n                          // Check if column should be hidden using the precomputed set\n                          if (hiddenColumns.has(cell.column.id)) {\n                            return null;\n                          }\n\n                          // Use the shared hook for cell props\n                          const cellProps = getTableCellProps(cell);\n\n                          return (\n                            <TableCell key={cell.id} {...cellProps}>\n                              {flexRender(\n                                cell.column.columnDef.cell,\n                                cell.getContext(),\n                              )}\n                            </TableCell>\n                          );\n                        })}\n                      </TableRow>\n                    );\n                  })\n                : normalizedOptions.emptyState}\n          </TableBody>\n        </UITable>\n      </div>\n      {normalizedOptions.pagination.enabled && (\n        <div className=\"mt-4\">{normalizedOptions.pagination.component}</div>\n      )}\n      {footer && <div className=\"mt-4\">{footer}</div>}\n    </div>\n  );\n}\n\nexport { DefaultTableLayout };\n"],"mappings":";;;;;;;;AA0BA,SAAS,mBAA6C,EACpD,OACA,cACA,aACA,YACA,WACA,YACA,mBACA,QACA,QACA,WACA,cACA,qBACA,YACA,YACA,uBACiC;CAEjC,MAAM,mBAAmB,oBAAoB;EAAE;EAAY;EAAa,CAAC;CACzE,MAAM,oBAAoB,qBAAqB,EAAE,cAAc,CAAC;CAChE,MAAM,0BAA0B,4BAA4B;CAG5D,MAAM,gBAAgB,sBAAsB;EAC1C;EACA;EACD,CAAC;CAGF,MAAM,oBAAoB,cAEtB,sBACE,YACA,YACA,mBACA,cACA,qBACA,MACD,EACH;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,qBAAC,OAAD;EAAgB;YAAhB;GACG,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAQ;IAAa;GAC/C,oBAAC,OAAD;IAAK,WAAU;cACb,qBAACA,OAAD,aACE,oBAAC,aAAD,YACG,MAAM,iBAAiB,CAAC,KAAK,gBAC5B,oBAAC,UAAD,YACG,YAAY,QAAQ,KAAK,WAAW;AAEnC,SAAI,cAAc,IAAI,OAAO,GAAG,CAC9B,QAAO;AAKT,YACE,oBAAC,WAAD;MAA2B,GAHT,wBAAwB,OAGA;gBACvC,OAAO,gBACJ,OACA,WACE,OAAO,OAAO,UAAU,QACxB,OAAO,YAAY,CACpB;MACK,EAPI,OAAO,GAOX;MAEd,EACO,EApBI,YAAY,GAoBhB,CACX,EACU,GACd,oBAAC,WAAD,YACG,YACG,kBAAkB,eAClB,MAAM,aAAa,CAAC,KAAK,SAAS,IAChC,MAAM,aAAa,CAAC,KAAK,KAAK,QAAQ;AAIpC,YACE,oBAAC,UAAD;MAAuB,GAHR,iBAAiB,IAGG;gBAChC,IAAI,iBAAiB,CAAC,KAAK,SAAS;AAEnC,WAAI,cAAc,IAAI,KAAK,OAAO,GAAG,CACnC,QAAO;AAMT,cACE,oBAAC,WAAD;QAAyB,GAHT,kBAAkB,KAGI;kBACnC,WACC,KAAK,OAAO,UAAU,MACtB,KAAK,YAAY,CAClB;QACS,EALI,KAAK,GAKT;QAEd;MACO,EAnBI,IAAI,GAmBR;MAEb,GACF,kBAAkB,YACd,EACJ;IACN;GACL,kBAAkB,WAAW,WAC5B,oBAAC,OAAD;IAAK,WAAU;cAAQ,kBAAkB,WAAW;IAAgB;GAErE,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAQ;IAAa;GAC3C"}

package/dist/esm/components/data-table/EmptyState.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+//#region src/components/data-table/EmptyState.d.ts
+interface TableEmptyStateProps {
+  /** Custom empty state content */
+  children?: React.ReactNode;
+  /** Number of columns to span */
+  colSpan: number;
+  /** Default empty state message */
+  message?: string;
+}
+declare function TableEmptyState({
+  children,
+  colSpan,
+  message
+}: TableEmptyStateProps): any;
+//#endregion
+export { TableEmptyState, TableEmptyStateProps };
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/esm/components/data-table/EmptyState.js

@@ -0,0 +1,16 @@
+import { TableCell, TableRow } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-table/EmptyState.tsx
+function TableEmptyState({ children, colSpan, message = "No data available" }) {
+	return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		className: "py-8 text-center",
+		colSpan,
+		children: children || message
+	}) });
+}
+
+//#endregion
+export { TableEmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/components/data-table/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../src/components/data-table/EmptyState.tsx"],"sourcesContent":["import { TableCell, TableRow } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nexport interface TableEmptyStateProps {\n  /** Custom empty state content */\n  children?: React.ReactNode;\n  /** Number of columns to span */\n  colSpan: number;\n  /** Default empty state message */\n  message?: string;\n}\n\nexport function TableEmptyState({\n  children,\n  colSpan,\n  message = \"No data available\",\n}: TableEmptyStateProps) {\n  return (\n    <TableRow>\n      <TableCell className=\"py-8 text-center\" colSpan={colSpan}>\n        {children || message}\n      </TableCell>\n    </TableRow>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,gBAAgB,EAC9B,UACA,SACA,UAAU,uBACa;AACvB,QACE,oBAAC,UAAD,YACE,oBAAC,WAAD;EAAW,WAAU;EAA4B;YAC9C,YAAY;EACH,GACH"}

package/dist/esm/components/data-table/LoadingState.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+//#region src/components/data-table/LoadingState.d.ts
+interface TableLoadingStateProps {
+  /** Custom loading content */
+  children?: React.ReactNode;
+  /** Number of columns to span */
+  colSpan: number;
+  /** Default loading message */
+  message?: string;
+}
+declare function TableLoadingState({
+  children,
+  colSpan,
+  message
+}: TableLoadingStateProps): any;
+//#endregion
+export { TableLoadingState, TableLoadingStateProps };
+//# sourceMappingURL=LoadingState.d.ts.map

package/dist/esm/components/data-table/LoadingState.js

@@ -0,0 +1,34 @@
+import { useTableInstance } from "./contexts/TableInstance.js";
+import "./contexts/index.js";
+import { SkeletonLoader } from "../SkeletonLoader.js";
+import "../index.js";
+import { TableCell, TableRow } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-table/LoadingState.tsx
+function TableLoadingState({ children, colSpan, message = "Loading data..." }) {
+	const { table } = useTableInstance();
+	const skeletonTable = (table && "refineCore" in table ? table : void 0) ?? table;
+	if (children) return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		className: "py-8 text-center",
+		colSpan,
+		children
+	}) });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		className: "pb-4 text-center",
+		colSpan,
+		children: message
+	}) }), /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		className: "py-8",
+		colSpan,
+		children: /* @__PURE__ */ jsx(SkeletonLoader, {
+			layout: "table",
+			table: skeletonTable
+		})
+	}) })] });
+}
+
+//#endregion
+export { TableLoadingState };
+//# sourceMappingURL=LoadingState.js.map

package/dist/esm/components/data-table/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../../src/components/data-table/LoadingState.tsx"],"sourcesContent":["import { TableCell, TableRow } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { SkeletonLoader } from \"@/components\";\nimport { useTableInstance } from \"./contexts\";\nimport type { UseTableReturnType } from \"@refinedev/react-table\";\n\nexport interface TableLoadingStateProps {\n  /** Custom loading content */\n  children?: React.ReactNode;\n  /** Number of columns to span */\n  colSpan: number;\n  /** Default loading message */\n  message?: string;\n}\n\nexport function TableLoadingState({\n  children,\n  colSpan,\n  message = \"Loading data...\",\n}: TableLoadingStateProps) {\n  const { table } = useTableInstance();\n\n  // Check if table has refineCore property to determine the correct type\n  const refineTable =\n    table && \"refineCore\" in table\n      ? (table as UseTableReturnType<any, any>)\n      : undefined;\n  const skeletonTable = refineTable ?? table;\n\n  if (children) {\n    return (\n      <TableRow>\n        <TableCell className=\"py-8 text-center\" colSpan={colSpan}>\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  }\n\n  return (\n    <>\n      <TableRow>\n        <TableCell className=\"pb-4 text-center\" colSpan={colSpan}>\n          {message}\n        </TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell className=\"py-8\" colSpan={colSpan}>\n          <SkeletonLoader\n            layout=\"table\"\n            table={skeletonTable as UseTableReturnType}\n          />\n        </TableCell>\n      </TableRow>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,kBAAkB,EAChC,UACA,SACA,UAAU,qBACe;CACzB,MAAM,EAAE,UAAU,kBAAkB;CAOpC,MAAM,iBAHJ,SAAS,gBAAgB,QACpB,QACD,WAC+B;AAErC,KAAI,SACF,QACE,oBAAC,UAAD,YACE,oBAAC,WAAD;EAAW,WAAU;EAA4B;EAC9C;EACS,GACH;AAIf,QACE,4CACE,oBAAC,UAAD,YACE,oBAAC,WAAD;EAAW,WAAU;EAA4B;YAC9C;EACS,GACH,GACX,oBAAC,UAAD,YACE,oBAAC,WAAD;EAAW,WAAU;EAAgB;YACnC,oBAAC,gBAAD;GACE,QAAO;GACP,OAAO;GACP;EACQ,GACH,EACV"}

package/dist/esm/components/data-table/TableAction.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+//#region src/components/data-table/TableAction.d.ts
+interface TableActionItem<TData> {
+  disabled?: boolean | ((row: TData) => boolean);
+  icon: React.ReactNode;
+  label?: string;
+  onClick: (row: TData) => void;
+  tooltip?: string;
+}
+interface TableActionProps<TData> {
+  items: TableActionItem<TData>[];
+  row: TData;
+}
+declare function TableAction<TData>({
+  items,
+  row
+}: TableActionProps<TData>): any;
+//#endregion
+export { TableAction, TableActionItem };
+//# sourceMappingURL=TableAction.d.ts.map