@raystack/apsara 0.14.1 → 0.14.2

package/dist/index.cjs

@@ -31757,10 +31757,14 @@ function DataTableFilterOptions({ children, ...props }) {
     const { table, filteredColumns, addFilterColumn } = useTable();
     const availableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter())
         .filter((column) => !filteredColumns.includes(column.id));
     return (jsxRuntimeExports$1.jsxs(DropdownMenu, { children: [jsxRuntimeExports$1.jsx(DropdownMenu.Trigger, { asChild: true, children: jsxRuntimeExports$1.jsx(Button$1, { variant: "ghost", ...props, children: children || (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntimeExports$1.jsx(PlusIcon, { width: 12, height: "12" }), " Filter"] })) }) }), availableColumns.length ? (jsxRuntimeExports$1.jsxs(DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntimeExports$1.jsx(DropdownMenu.Label, { children: "Filter column" }), jsxRuntimeExports$1.jsx(DropdownMenu.Separator, {}), availableColumns.map((column) => {
-                        return (jsxRuntimeExports$1.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: column.id }, column.id));
+                        const columnHeader = column?.columnDef?.header;
+                        const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+                        return (jsxRuntimeExports$1.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: columnName }, column.id));
                     })] })) : null] }));
 }
 
@@ -32031,7 +32035,9 @@ function DataTableFilterChips(props) {
     const { filteredColumns, table, updateColumnCustomFilter } = useTable();
     const tableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide());
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter());
     if (!filteredColumns.length)
         return null;
     return (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", className: styles$4.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
@@ -32221,7 +32227,7 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, loaderRow = 5, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React.useState({});
     const convertedChildren = React.Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32230,6 +32236,9 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         null;
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
+    const tableData = isLoading
+        ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
+        : data;
     const [columnVisibility, setColumnVisibility] = React.useState({});
     const [rowSelection, setRowSelection] = React.useState({});
     const [globalFilter, setGlobalFilter] = React.useState("");
@@ -32249,7 +32258,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
     const table = useReactTable({
-        data,
+        data: tableData,
         columns: columnWithCustomFilter,
         globalFilterFn: "auto",
         enableRowSelection: true,