@sikka/hawa 0.41.2-next → 0.42.0-next

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/dataTable/index.d.mts +7 -1
  2. package/dist/dataTable/index.d.ts +7 -1
  3. package/dist/dataTable/index.js +52 -11
  4. package/dist/dataTable/index.js.map +1 -1
  5. package/dist/dataTable/index.mjs +52 -11
  6. package/dist/dataTable/index.mjs.map +1 -1
  7. package/dist/elements/index.d.mts +7 -1
  8. package/dist/elements/index.d.ts +7 -1
  9. package/dist/elements/index.js +52 -11
  10. package/dist/elements/index.mjs +52 -11
  11. package/dist/index.css +6 -0
  12. package/dist/index.d.mts +7 -1
  13. package/dist/index.d.ts +7 -1
  14. package/dist/index.js +52 -11
  15. package/dist/index.mjs +52 -11
  16. package/package.json +1 -1
package/dist/elements/index.d.mts CHANGED
@@ -353,6 +353,12 @@ type DataTableProps<DataProps = {}> = {
353
353
  enableHideColumns?: boolean;
354
354
  enableGoTo?: boolean;
355
355
  enableSelection?: boolean;
356
+ enableFiltering?: boolean;
357
+ filters?: {
358
+ accessorKey: string;
359
+ value: string;
360
+ label: string;
361
+ }[];
356
362
  hideHeader?: boolean;
357
363
  data: DataProps[];
358
364
  itemsPerPage?: any[];
@@ -386,7 +392,7 @@ declare module "@tanstack/table-core" {
386
392
  i18nKey?: string;
387
393
  }
388
394
  }
389
- declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
395
+ declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
390
396
 
391
397
  type BackToTopTypes = {
392
398
  /** Horizontal padding relative to the attached corner */
package/dist/elements/index.d.ts CHANGED
@@ -353,6 +353,12 @@ type DataTableProps<DataProps = {}> = {
353
353
  enableHideColumns?: boolean;
354
354
  enableGoTo?: boolean;
355
355
  enableSelection?: boolean;
356
+ enableFiltering?: boolean;
357
+ filters?: {
358
+ accessorKey: string;
359
+ value: string;
360
+ label: string;
361
+ }[];
356
362
  hideHeader?: boolean;
357
363
  data: DataProps[];
358
364
  itemsPerPage?: any[];
@@ -386,7 +392,7 @@ declare module "@tanstack/table-core" {
386
392
  i18nKey?: string;
387
393
  }
388
394
  }
389
- declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
395
+ declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React.JSX.Element;
390
396
 
391
397
  type BackToTopTypes = {
392
398
  /** Horizontal padding relative to the attached corner */
package/dist/elements/index.js CHANGED
@@ -3226,11 +3226,12 @@ var DataTable = ({
3226
3226
  translateFn,
3227
3227
  enableHideColumns,
3228
3228
  enableSelection,
3229
+ enableFiltering,
3229
3230
  enableSearch,
3230
3231
  enableGoTo,
3231
3232
  ...props
3232
3233
  }) => {
3233
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
3234
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
3234
3235
  const [sorting, setSorting] = React24.useState(
3235
3236
  props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
3236
3237
  );
@@ -3244,6 +3245,7 @@ var DataTable = ({
3244
3245
  return savedVisibility ? JSON.parse(savedVisibility) : {};
3245
3246
  });
3246
3247
  const [rowSelection, setRowSelection] = React24.useState({});
3248
+ const [selectedFilters, setSelectedFilters] = React24.useState([]);
3247
3249
  let mainColumns = enableSelection ? [
3248
3250
  {
3249
3251
  id: "select",
@@ -3323,6 +3325,19 @@ var DataTable = ({
3323
3325
  return newColumnVisibility;
3324
3326
  });
3325
3327
  }, [columns]);
3328
+ React24.useEffect(() => {
3329
+ var _a2;
3330
+ (_a2 = props.filters) == null ? void 0 : _a2.forEach((filter) => {
3331
+ var _a3;
3332
+ const activeFilter = selectedFilters.find(
3333
+ (selectedFilter) => {
3334
+ var _a4, _b2;
3335
+ return filter.accessorKey === ((_b2 = (_a4 = props.filters) == null ? void 0 : _a4.find((f) => f.value === selectedFilter)) == null ? void 0 : _b2.accessorKey);
3336
+ }
3337
+ );
3338
+ (_a3 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a3.setFilterValue(activeFilter || "");
3339
+ });
3340
+ }, [selectedFilters, props.filters]);
3326
3341
  return /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React24.createElement(
3327
3342
  Input,
3328
3343
  {
@@ -3406,7 +3421,33 @@ var DataTable = ({
3406
3421
  ) : column.id
3407
3422
  );
3408
3423
  })
3409
- ))), props.isLoading ? /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React24.createElement(
3424
+ ))), enableFiltering && /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex-row hawa-gap-2 hawa-flex" }, (_e = props.filters) == null ? void 0 : _e.map((filter) => {
3425
+ return /* @__PURE__ */ React24.createElement(
3426
+ Button,
3427
+ {
3428
+ variant: "outline",
3429
+ className: selectedFilters.includes(filter.value) ? "!hawa-bg-primary !hawa-text-primary-foreground" : "",
3430
+ size: "xs",
3431
+ onClick: () => {
3432
+ var _a2, _b2;
3433
+ let newSelectedFilters = selectedFilters.filter(
3434
+ (item) => {
3435
+ var _a3, _b3;
3436
+ return ((_b3 = (_a3 = props.filters) == null ? void 0 : _a3.find((f) => f.value === item)) == null ? void 0 : _b3.accessorKey) !== filter.accessorKey;
3437
+ }
3438
+ );
3439
+ if (!selectedFilters.includes(filter.value)) {
3440
+ newSelectedFilters.push(filter.value);
3441
+ (_a2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a2.setFilterValue(filter.value);
3442
+ } else {
3443
+ (_b2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _b2.setFilterValue("");
3444
+ }
3445
+ setSelectedFilters(newSelectedFilters);
3446
+ }
3447
+ },
3448
+ filter.label
3449
+ );
3450
+ })), props.isLoading ? /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React24.createElement(
3410
3451
  "div",
3411
3452
  {
3412
3453
  className: cn(
@@ -3435,7 +3476,7 @@ var DataTable = ({
3435
3476
  header.getContext()
3436
3477
  )
3437
3478
  );
3438
- })))), /* @__PURE__ */ React24.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React24.createElement(
3479
+ })))), /* @__PURE__ */ React24.createElement(TableBody, null, ((_f = table.getRowModel().rows) == null ? void 0 : _f.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React24.createElement(
3439
3480
  TableRow,
3440
3481
  {
3441
3482
  key: row.id,
@@ -3467,7 +3508,7 @@ var DataTable = ({
3467
3508
  colSpan: columns.length,
3468
3509
  className: "hawa-h-24 hawa-text-center"
3469
3510
  },
3470
- (_f = props.texts) == null ? void 0 : _f.noData
3511
+ (_g = props.texts) == null ? void 0 : _g.noData
3471
3512
  ))))),
3472
3513
  /* @__PURE__ */ React24.createElement(
3473
3514
  "div",
@@ -3484,7 +3525,7 @@ var DataTable = ({
3484
3525
  className: "hawa-text-muted-foreground hawa-text-sm",
3485
3526
  dir: props.direction
3486
3527
  },
3487
- /* @__PURE__ */ React24.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
3528
+ /* @__PURE__ */ React24.createElement("span", null, (_h = props.texts) == null ? void 0 : _h.total),
3488
3529
  " ",
3489
3530
  /* @__PURE__ */ React24.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
3490
3531
  ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React24.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__ */ React24.createElement(
@@ -3495,11 +3536,11 @@ var DataTable = ({
3495
3536
  },
3496
3537
  table.getFilteredSelectedRowModel().rows.length,
3497
3538
  " ",
3498
- (_h = props.texts) == null ? void 0 : _h.of,
3539
+ (_i = props.texts) == null ? void 0 : _i.of,
3499
3540
  " ",
3500
3541
  table.getFilteredRowModel().rows.length,
3501
3542
  " ",
3502
- (_i = props.texts) == null ? void 0 : _i.selectedRows
3543
+ (_j = props.texts) == null ? void 0 : _j.selectedRows
3503
3544
  )), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React24.createElement("div", { className: "" }, /* @__PURE__ */ React24.createElement(
3504
3545
  DropdownMenu,
3505
3546
  {
@@ -3512,10 +3553,10 @@ var DataTable = ({
3512
3553
  table.getFilteredSelectedRowModel().rows
3513
3554
  )
3514
3555
  })),
3515
- trigger: /* @__PURE__ */ React24.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
3556
+ trigger: /* @__PURE__ */ React24.createElement(Button, { size: "xs" }, ((_k = props.texts) == null ? void 0 : _k.bulkAction) || "Bulk Action")
3516
3557
  }
3517
3558
  ))) : null,
3518
- /* @__PURE__ */ React24.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__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React24.createElement(
3559
+ /* @__PURE__ */ React24.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__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-text-sm" }, (_l = props.texts) == null ? void 0 : _l.goTo), /* @__PURE__ */ React24.createElement(
3519
3560
  "input",
3520
3561
  {
3521
3562
  max: table.getPageCount(),
@@ -3552,11 +3593,11 @@ var DataTable = ({
3552
3593
  size: "icon",
3553
3594
  className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
3554
3595
  },
3555
- `${table.getState().pagination.pageSize} / ${(_l = props.texts) == null ? void 0 : _l.page}`
3596
+ `${table.getState().pagination.pageSize} / ${(_m = props.texts) == null ? void 0 : _m.page}`
3556
3597
  ),
3557
3598
  onItemSelect: (e) => table.setPageSize(Number(e))
3558
3599
  }
3559
- ), table.getPageCount() > 1 && /* @__PURE__ */ React24.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React24.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React24.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React24.createElement(
3600
+ ), table.getPageCount() > 1 && /* @__PURE__ */ React24.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React24.createElement("div", null, (_n = props.texts) == null ? void 0 : _n.page), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React24.createElement("span", null, (_o = props.texts) == null ? void 0 : _o.of), /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React24.createElement(
3560
3601
  Button,
3561
3602
  {
3562
3603
  "aria-label": "Next Table Page",
package/dist/elements/index.mjs CHANGED
@@ -940,11 +940,12 @@ var DataTable = ({
940
940
  translateFn,
941
941
  enableHideColumns,
942
942
  enableSelection,
943
+ enableFiltering,
943
944
  enableSearch,
944
945
  enableGoTo,
945
946
  ...props
946
947
  }) => {
947
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
948
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
948
949
  const [sorting, setSorting] = React10.useState(
949
950
  props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
950
951
  );
@@ -958,6 +959,7 @@ var DataTable = ({
958
959
  return savedVisibility ? JSON.parse(savedVisibility) : {};
959
960
  });
960
961
  const [rowSelection, setRowSelection] = React10.useState({});
962
+ const [selectedFilters, setSelectedFilters] = React10.useState([]);
961
963
  let mainColumns = enableSelection ? [
962
964
  {
963
965
  id: "select",
@@ -1037,6 +1039,19 @@ var DataTable = ({
1037
1039
  return newColumnVisibility;
1038
1040
  });
1039
1041
  }, [columns]);
1042
+ React10.useEffect(() => {
1043
+ var _a2;
1044
+ (_a2 = props.filters) == null ? void 0 : _a2.forEach((filter) => {
1045
+ var _a3;
1046
+ const activeFilter = selectedFilters.find(
1047
+ (selectedFilter) => {
1048
+ var _a4, _b2;
1049
+ return filter.accessorKey === ((_b2 = (_a4 = props.filters) == null ? void 0 : _a4.find((f) => f.value === selectedFilter)) == null ? void 0 : _b2.accessorKey);
1050
+ }
1051
+ );
1052
+ (_a3 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a3.setFilterValue(activeFilter || "");
1053
+ });
1054
+ }, [selectedFilters, props.filters]);
1040
1055
  return /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React10.createElement(
1041
1056
  Input,
1042
1057
  {
@@ -1120,7 +1135,33 @@ var DataTable = ({
1120
1135
  ) : column.id
1121
1136
  );
1122
1137
  })
1123
- ))), props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React10.createElement(
1138
+ ))), enableFiltering && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex-row hawa-gap-2 hawa-flex" }, (_e = props.filters) == null ? void 0 : _e.map((filter) => {
1139
+ return /* @__PURE__ */ React10.createElement(
1140
+ Button,
1141
+ {
1142
+ variant: "outline",
1143
+ className: selectedFilters.includes(filter.value) ? "!hawa-bg-primary !hawa-text-primary-foreground" : "",
1144
+ size: "xs",
1145
+ onClick: () => {
1146
+ var _a2, _b2;
1147
+ let newSelectedFilters = selectedFilters.filter(
1148
+ (item) => {
1149
+ var _a3, _b3;
1150
+ return ((_b3 = (_a3 = props.filters) == null ? void 0 : _a3.find((f) => f.value === item)) == null ? void 0 : _b3.accessorKey) !== filter.accessorKey;
1151
+ }
1152
+ );
1153
+ if (!selectedFilters.includes(filter.value)) {
1154
+ newSelectedFilters.push(filter.value);
1155
+ (_a2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a2.setFilterValue(filter.value);
1156
+ } else {
1157
+ (_b2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _b2.setFilterValue("");
1158
+ }
1159
+ setSelectedFilters(newSelectedFilters);
1160
+ }
1161
+ },
1162
+ filter.label
1163
+ );
1164
+ })), props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React10.createElement(
1124
1165
  "div",
1125
1166
  {
1126
1167
  className: cn(
@@ -1149,7 +1190,7 @@ var DataTable = ({
1149
1190
  header.getContext()
1150
1191
  )
1151
1192
  );
1152
- })))), /* @__PURE__ */ React10.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React10.createElement(
1193
+ })))), /* @__PURE__ */ React10.createElement(TableBody, null, ((_f = table.getRowModel().rows) == null ? void 0 : _f.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React10.createElement(
1153
1194
  TableRow,
1154
1195
  {
1155
1196
  key: row.id,
@@ -1181,7 +1222,7 @@ var DataTable = ({
1181
1222
  colSpan: columns.length,
1182
1223
  className: "hawa-h-24 hawa-text-center"
1183
1224
  },
1184
- (_f = props.texts) == null ? void 0 : _f.noData
1225
+ (_g = props.texts) == null ? void 0 : _g.noData
1185
1226
  ))))),
1186
1227
  /* @__PURE__ */ React10.createElement(
1187
1228
  "div",
@@ -1198,7 +1239,7 @@ var DataTable = ({
1198
1239
  className: "hawa-text-muted-foreground hawa-text-sm",
1199
1240
  dir: props.direction
1200
1241
  },
1201
- /* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
1242
+ /* @__PURE__ */ React10.createElement("span", null, (_h = props.texts) == null ? void 0 : _h.total),
1202
1243
  " ",
1203
1244
  /* @__PURE__ */ React10.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
1204
1245
  ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React10.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__ */ React10.createElement(
@@ -1209,11 +1250,11 @@ var DataTable = ({
1209
1250
  },
1210
1251
  table.getFilteredSelectedRowModel().rows.length,
1211
1252
  " ",
1212
- (_h = props.texts) == null ? void 0 : _h.of,
1253
+ (_i = props.texts) == null ? void 0 : _i.of,
1213
1254
  " ",
1214
1255
  table.getFilteredRowModel().rows.length,
1215
1256
  " ",
1216
- (_i = props.texts) == null ? void 0 : _i.selectedRows
1257
+ (_j = props.texts) == null ? void 0 : _j.selectedRows
1217
1258
  )), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
1218
1259
  DropdownMenu,
1219
1260
  {
@@ -1226,10 +1267,10 @@ var DataTable = ({
1226
1267
  table.getFilteredSelectedRowModel().rows
1227
1268
  )
1228
1269
  })),
1229
- trigger: /* @__PURE__ */ React10.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
1270
+ trigger: /* @__PURE__ */ React10.createElement(Button, { size: "xs" }, ((_k = props.texts) == null ? void 0 : _k.bulkAction) || "Bulk Action")
1230
1271
  }
1231
1272
  ))) : null,
1232
- /* @__PURE__ */ React10.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__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React10.createElement(
1273
+ /* @__PURE__ */ React10.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__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-sm" }, (_l = props.texts) == null ? void 0 : _l.goTo), /* @__PURE__ */ React10.createElement(
1233
1274
  "input",
1234
1275
  {
1235
1276
  max: table.getPageCount(),
@@ -1266,11 +1307,11 @@ var DataTable = ({
1266
1307
  size: "icon",
1267
1308
  className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
1268
1309
  },
1269
- `${table.getState().pagination.pageSize} / ${(_l = props.texts) == null ? void 0 : _l.page}`
1310
+ `${table.getState().pagination.pageSize} / ${(_m = props.texts) == null ? void 0 : _m.page}`
1270
1311
  ),
1271
1312
  onItemSelect: (e) => table.setPageSize(Number(e))
1272
1313
  }
1273
- ), table.getPageCount() > 1 && /* @__PURE__ */ React10.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React10.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React10.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React10.createElement(
1314
+ ), table.getPageCount() > 1 && /* @__PURE__ */ React10.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React10.createElement("div", null, (_n = props.texts) == null ? void 0 : _n.page), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React10.createElement("span", null, (_o = props.texts) == null ? void 0 : _o.of), /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React10.createElement(
1274
1315
  Button,
1275
1316
  {
1276
1317
  "aria-label": "Next Table Page",
package/dist/index.css CHANGED
@@ -2309,6 +2309,9 @@ input[type="number"]::-webkit-inner-spin-button,
2309
2309
  .\!hawa-bg-destructive\/\[0\.3\] {
2310
2310
  background-color: hsl(var(--destructive) / 0.3) !important;
2311
2311
  }
2312
+ .\!hawa-bg-primary {
2313
+ background-color: hsl(var(--primary)) !important;
2314
+ }
2312
2315
  .\!hawa-bg-transparent {
2313
2316
  background-color: transparent !important;
2314
2317
  }
@@ -2907,6 +2910,9 @@ input[type="number"]::-webkit-inner-spin-button,
2907
2910
  .hawa-tracking-widest {
2908
2911
  letter-spacing: 0.1em;
2909
2912
  }
2913
+ .\!hawa-text-primary-foreground {
2914
+ color: hsl(var(--primary-foreground)) !important;
2915
+ }
2910
2916
  .hawa-text-\[\#666666\] {
2911
2917
  --tw-text-opacity: 1;
2912
2918
  color: rgb(102 102 102 / var(--tw-text-opacity));
package/dist/index.d.mts CHANGED
@@ -500,6 +500,12 @@ type DataTableProps<DataProps = {}> = {
500
500
  enableHideColumns?: boolean;
501
501
  enableGoTo?: boolean;
502
502
  enableSelection?: boolean;
503
+ enableFiltering?: boolean;
504
+ filters?: {
505
+ accessorKey: string;
506
+ value: string;
507
+ label: string;
508
+ }[];
503
509
  hideHeader?: boolean;
504
510
  data: DataProps[];
505
511
  itemsPerPage?: any[];
@@ -533,7 +539,7 @@ declare module "@tanstack/table-core" {
533
539
  i18nKey?: string;
534
540
  }
535
541
  }
536
- declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
542
+ declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
537
543
 
538
544
  type BackToTopTypes = {
539
545
  /** Horizontal padding relative to the attached corner */
package/dist/index.d.ts CHANGED
@@ -500,6 +500,12 @@ type DataTableProps<DataProps = {}> = {
500
500
  enableHideColumns?: boolean;
501
501
  enableGoTo?: boolean;
502
502
  enableSelection?: boolean;
503
+ enableFiltering?: boolean;
504
+ filters?: {
505
+ accessorKey: string;
506
+ value: string;
507
+ label: string;
508
+ }[];
503
509
  hideHeader?: boolean;
504
510
  data: DataProps[];
505
511
  itemsPerPage?: any[];
@@ -533,7 +539,7 @@ declare module "@tanstack/table-core" {
533
539
  i18nKey?: string;
534
540
  }
535
541
  }
536
- declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
542
+ declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSelection, enableFiltering, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
537
543
 
538
544
  type BackToTopTypes = {
539
545
  /** Horizontal padding relative to the attached corner */
package/dist/index.js CHANGED
@@ -3301,11 +3301,12 @@ var DataTable = ({
3301
3301
  translateFn,
3302
3302
  enableHideColumns,
3303
3303
  enableSelection,
3304
+ enableFiltering,
3304
3305
  enableSearch,
3305
3306
  enableGoTo,
3306
3307
  ...props
3307
3308
  }) => {
3308
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
3309
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
3309
3310
  const [sorting, setSorting] = React24.useState(
3310
3311
  props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
3311
3312
  );
@@ -3319,6 +3320,7 @@ var DataTable = ({
3319
3320
  return savedVisibility ? JSON.parse(savedVisibility) : {};
3320
3321
  });
3321
3322
  const [rowSelection, setRowSelection] = React24.useState({});
3323
+ const [selectedFilters, setSelectedFilters] = React24.useState([]);
3322
3324
  let mainColumns = enableSelection ? [
3323
3325
  {
3324
3326
  id: "select",
@@ -3398,6 +3400,19 @@ var DataTable = ({
3398
3400
  return newColumnVisibility;
3399
3401
  });
3400
3402
  }, [columns]);
3403
+ React24.useEffect(() => {
3404
+ var _a2;
3405
+ (_a2 = props.filters) == null ? void 0 : _a2.forEach((filter) => {
3406
+ var _a3;
3407
+ const activeFilter = selectedFilters.find(
3408
+ (selectedFilter) => {
3409
+ var _a4, _b2;
3410
+ return filter.accessorKey === ((_b2 = (_a4 = props.filters) == null ? void 0 : _a4.find((f) => f.value === selectedFilter)) == null ? void 0 : _b2.accessorKey);
3411
+ }
3412
+ );
3413
+ (_a3 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a3.setFilterValue(activeFilter || "");
3414
+ });
3415
+ }, [selectedFilters, props.filters]);
3401
3416
  return /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React24.createElement(
3402
3417
  Input,
3403
3418
  {
@@ -3481,7 +3496,33 @@ var DataTable = ({
3481
3496
  ) : column.id
3482
3497
  );
3483
3498
  })
3484
- ))), props.isLoading ? /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React24.createElement(
3499
+ ))), enableFiltering && /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex-row hawa-gap-2 hawa-flex" }, (_e = props.filters) == null ? void 0 : _e.map((filter) => {
3500
+ return /* @__PURE__ */ React24.createElement(
3501
+ Button,
3502
+ {
3503
+ variant: "outline",
3504
+ className: selectedFilters.includes(filter.value) ? "!hawa-bg-primary !hawa-text-primary-foreground" : "",
3505
+ size: "xs",
3506
+ onClick: () => {
3507
+ var _a2, _b2;
3508
+ let newSelectedFilters = selectedFilters.filter(
3509
+ (item) => {
3510
+ var _a3, _b3;
3511
+ return ((_b3 = (_a3 = props.filters) == null ? void 0 : _a3.find((f) => f.value === item)) == null ? void 0 : _b3.accessorKey) !== filter.accessorKey;
3512
+ }
3513
+ );
3514
+ if (!selectedFilters.includes(filter.value)) {
3515
+ newSelectedFilters.push(filter.value);
3516
+ (_a2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a2.setFilterValue(filter.value);
3517
+ } else {
3518
+ (_b2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _b2.setFilterValue("");
3519
+ }
3520
+ setSelectedFilters(newSelectedFilters);
3521
+ }
3522
+ },
3523
+ filter.label
3524
+ );
3525
+ })), props.isLoading ? /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React24.createElement(
3485
3526
  "div",
3486
3527
  {
3487
3528
  className: cn(
@@ -3510,7 +3551,7 @@ var DataTable = ({
3510
3551
  header.getContext()
3511
3552
  )
3512
3553
  );
3513
- })))), /* @__PURE__ */ React24.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React24.createElement(
3554
+ })))), /* @__PURE__ */ React24.createElement(TableBody, null, ((_f = table.getRowModel().rows) == null ? void 0 : _f.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React24.createElement(
3514
3555
  TableRow,
3515
3556
  {
3516
3557
  key: row.id,
@@ -3542,7 +3583,7 @@ var DataTable = ({
3542
3583
  colSpan: columns.length,
3543
3584
  className: "hawa-h-24 hawa-text-center"
3544
3585
  },
3545
- (_f = props.texts) == null ? void 0 : _f.noData
3586
+ (_g = props.texts) == null ? void 0 : _g.noData
3546
3587
  ))))),
3547
3588
  /* @__PURE__ */ React24.createElement(
3548
3589
  "div",
@@ -3559,7 +3600,7 @@ var DataTable = ({
3559
3600
  className: "hawa-text-muted-foreground hawa-text-sm",
3560
3601
  dir: props.direction
3561
3602
  },
3562
- /* @__PURE__ */ React24.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
3603
+ /* @__PURE__ */ React24.createElement("span", null, (_h = props.texts) == null ? void 0 : _h.total),
3563
3604
  " ",
3564
3605
  /* @__PURE__ */ React24.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
3565
3606
  ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React24.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__ */ React24.createElement(
@@ -3570,11 +3611,11 @@ var DataTable = ({
3570
3611
  },
3571
3612
  table.getFilteredSelectedRowModel().rows.length,
3572
3613
  " ",
3573
- (_h = props.texts) == null ? void 0 : _h.of,
3614
+ (_i = props.texts) == null ? void 0 : _i.of,
3574
3615
  " ",
3575
3616
  table.getFilteredRowModel().rows.length,
3576
3617
  " ",
3577
- (_i = props.texts) == null ? void 0 : _i.selectedRows
3618
+ (_j = props.texts) == null ? void 0 : _j.selectedRows
3578
3619
  )), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React24.createElement("div", { className: "" }, /* @__PURE__ */ React24.createElement(
3579
3620
  DropdownMenu,
3580
3621
  {
@@ -3587,10 +3628,10 @@ var DataTable = ({
3587
3628
  table.getFilteredSelectedRowModel().rows
3588
3629
  )
3589
3630
  })),
3590
- trigger: /* @__PURE__ */ React24.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
3631
+ trigger: /* @__PURE__ */ React24.createElement(Button, { size: "xs" }, ((_k = props.texts) == null ? void 0 : _k.bulkAction) || "Bulk Action")
3591
3632
  }
3592
3633
  ))) : null,
3593
- /* @__PURE__ */ React24.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__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React24.createElement(
3634
+ /* @__PURE__ */ React24.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__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-text-sm" }, (_l = props.texts) == null ? void 0 : _l.goTo), /* @__PURE__ */ React24.createElement(
3594
3635
  "input",
3595
3636
  {
3596
3637
  max: table.getPageCount(),
@@ -3627,11 +3668,11 @@ var DataTable = ({
3627
3668
  size: "icon",
3628
3669
  className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
3629
3670
  },
3630
- `${table.getState().pagination.pageSize} / ${(_l = props.texts) == null ? void 0 : _l.page}`
3671
+ `${table.getState().pagination.pageSize} / ${(_m = props.texts) == null ? void 0 : _m.page}`
3631
3672
  ),
3632
3673
  onItemSelect: (e) => table.setPageSize(Number(e))
3633
3674
  }
3634
- ), table.getPageCount() > 1 && /* @__PURE__ */ React24.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React24.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React24.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React24.createElement(
3675
+ ), table.getPageCount() > 1 && /* @__PURE__ */ React24.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React24.createElement("div", null, (_n = props.texts) == null ? void 0 : _n.page), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React24.createElement("span", null, (_o = props.texts) == null ? void 0 : _o.of), /* @__PURE__ */ React24.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React24.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React24.createElement(
3635
3676
  Button,
3636
3677
  {
3637
3678
  "aria-label": "Next Table Page",