@sikka/hawa 0.41.1-next → 0.42.0-next

package/dist/dataTable/index.d.mts

@@ -10,6 +10,12 @@ type DataTableProps<DataProps = {}> = {
     enableHideColumns?: boolean;
     enableGoTo?: boolean;
     enableSelection?: boolean;
+    enableFiltering?: boolean;
+    filters?: {
+        accessorKey: string;
+        value: string;
+        label: string;
+    }[];
     hideHeader?: boolean;
     data: DataProps[];
     itemsPerPage?: any[];
@@ -43,6 +49,6 @@ declare module "@tanstack/table-core" {
         i18nKey?: string;
     }
 }
-declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
+declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
 
 export { DataTable };

package/dist/dataTable/index.d.ts

@@ -10,6 +10,12 @@ type DataTableProps<DataProps = {}> = {
     enableHideColumns?: boolean;
     enableGoTo?: boolean;
     enableSelection?: boolean;
+    enableFiltering?: boolean;
+    filters?: {
+        accessorKey: string;
+        value: string;
+        label: string;
+    }[];
     hideHeader?: boolean;
     data: DataProps[];
     itemsPerPage?: any[];
@@ -43,6 +49,6 @@ declare module "@tanstack/table-core" {
         i18nKey?: string;
     }
 }
-declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
+declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
 
 export { DataTable };

package/dist/dataTable/index.js

@@ -1334,11 +1334,12 @@ var DataTable = ({
   translateFn,
   enableHideColumns,
   enableSelection,
+  enableFiltering,
   enableSearch,
   enableGoTo,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const [sorting, setSorting] = React11.useState(
     props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
   );
@@ -1352,6 +1353,7 @@ var DataTable = ({
     return savedVisibility ? JSON.parse(savedVisibility) : {};
   });
   const [rowSelection, setRowSelection] = React11.useState({});
+  const [selectedFilters, setSelectedFilters] = React11.useState([]);
   let mainColumns = enableSelection ? [
     {
       id: "select",
@@ -1431,6 +1433,19 @@ var DataTable = ({
       return newColumnVisibility;
     });
   }, [columns]);
+  React11.useEffect(() => {
+    var _a2;
+    (_a2 = props.filters) == null ? void 0 : _a2.forEach((filter) => {
+      var _a3;
+      const activeFilter = selectedFilters.find(
+        (selectedFilter) => {
+          var _a4, _b2;
+          return filter.accessorKey === ((_b2 = (_a4 = props.filters) == null ? void 0 : _a4.find((f) => f.value === selectedFilter)) == null ? void 0 : _b2.accessorKey);
+        }
+      );
+      (_a3 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a3.setFilterValue(activeFilter || "");
+    });
+  }, [selectedFilters, props.filters]);
   return /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React11.createElement(
     Input,
     {
@@ -1514,7 +1529,33 @@ var DataTable = ({
         ) : column.id
       );
     })
-  ))), props.isLoading ? /* @__PURE__ */ React11.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React11.createElement(
+  ))), enableFiltering && /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex-row hawa-gap-2 hawa-flex" }, (_e = props.filters) == null ? void 0 : _e.map((filter) => {
+    return /* @__PURE__ */ React11.createElement(
+      Button,
+      {
+        variant: "outline",
+        className: selectedFilters.includes(filter.value) ? "!hawa-bg-primary !hawa-text-primary-foreground" : "",
+        size: "xs",
+        onClick: () => {
+          var _a2, _b2;
+          let newSelectedFilters = selectedFilters.filter(
+            (item) => {
+              var _a3, _b3;
+              return ((_b3 = (_a3 = props.filters) == null ? void 0 : _a3.find((f) => f.value === item)) == null ? void 0 : _b3.accessorKey) !== filter.accessorKey;
+            }
+          );
+          if (!selectedFilters.includes(filter.value)) {
+            newSelectedFilters.push(filter.value);
+            (_a2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a2.setFilterValue(filter.value);
+          } else {
+            (_b2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _b2.setFilterValue("");
+          }
+          setSelectedFilters(newSelectedFilters);
+        }
+      },
+      filter.label
+    );
+  })), props.isLoading ? /* @__PURE__ */ React11.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: cn(
@@ -1543,7 +1584,7 @@ var DataTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React11.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React11.createElement(
+    })))), /* @__PURE__ */ React11.createElement(TableBody, null, ((_f = table.getRowModel().rows) == null ? void 0 : _f.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React11.createElement(
       TableRow,
       {
         key: row.id,
@@ -1575,7 +1616,7 @@ var DataTable = ({
         colSpan: columns.length,
         className: "hawa-h-24 hawa-text-center"
       },
-      (_f = props.texts) == null ? void 0 : _f.noData
+      (_g = props.texts) == null ? void 0 : _g.noData
     ))))),
     /* @__PURE__ */ React11.createElement(
       "div",
@@ -1592,7 +1633,7 @@ var DataTable = ({
           className: "hawa-text-muted-foreground hawa-text-sm",
           dir: props.direction
         },
-        /* @__PURE__ */ React11.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
+        /* @__PURE__ */ React11.createElement("span", null, (_h = props.texts) == null ? void 0 : _h.total),
         " ",
         /* @__PURE__ */ React11.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
       ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React11.createElement("div", { className: "hawa-w-[0.5px] hawa-mx-2 hawa-bg-red-500 hawa-h-full" }), table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React11.createElement(
@@ -1603,11 +1644,11 @@ var DataTable = ({
         },
         table.getFilteredSelectedRowModel().rows.length,
         " ",
-        (_h = props.texts) == null ? void 0 : _h.of,
+        (_i = props.texts) == null ? void 0 : _i.of,
         " ",
         table.getFilteredRowModel().rows.length,
         " ",
-        (_i = props.texts) == null ? void 0 : _i.selectedRows
+        (_j = props.texts) == null ? void 0 : _j.selectedRows
       )), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "" }, /* @__PURE__ */ React11.createElement(
         DropdownMenu,
         {
@@ -1620,10 +1661,10 @@ var DataTable = ({
               table.getFilteredSelectedRowModel().rows
             )
           })),
-          trigger: /* @__PURE__ */ React11.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
+          trigger: /* @__PURE__ */ React11.createElement(Button, { size: "xs" }, ((_k = props.texts) == null ? void 0 : _k.bulkAction) || "Bulk Action")
         }
       ))) : null,
-      /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-items-center hawa-gap-2 hawa-bg--500 tablet:hawa-w-fit hawa-justify-between" }, enableGoTo && /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-items-center hawa-gap-2 hawa-bg--500 tablet:hawa-w-fit hawa-justify-between" }, enableGoTo && /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-text-sm" }, (_l = props.texts) == null ? void 0 : _l.goTo), /* @__PURE__ */ React11.createElement(
         "input",
         {
           max: table.getPageCount(),
@@ -1660,11 +1701,11 @@ var DataTable = ({
               size: "icon",
               className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
             },
-            `${table.getState().pagination.pageSize} / ${(_l = props.texts) == null ? void 0 : _l.page}`
+            `${table.getState().pagination.pageSize} / ${(_m = props.texts) == null ? void 0 : _m.page}`
           ),
           onItemSelect: (e) => table.setPageSize(Number(e))
         }
-      ), table.getPageCount() > 1 && /* @__PURE__ */ React11.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React11.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React11.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React11.createElement(
+      ), table.getPageCount() > 1 && /* @__PURE__ */ React11.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React11.createElement("div", null, (_n = props.texts) == null ? void 0 : _n.page), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React11.createElement("span", null, (_o = props.texts) == null ? void 0 : _o.of), /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React11.createElement(
         Button,
         {
           "aria-label": "Next Table Page",