@sikka/hawa 0.11.17-next → 0.11.18-next

package/dist/index.d.mts

@@ -466,6 +466,7 @@ type DataTableProps<DataProps = {}> = {
     direction?: "rtl" | "ltr";
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
+    itemsPerPage?: any[];
     showCount?: boolean;
     condensed?: boolean;
     isLoading?: boolean;

package/dist/index.d.ts

@@ -466,6 +466,7 @@ type DataTableProps<DataProps = {}> = {
     direction?: "rtl" | "ltr";
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
+    itemsPerPage?: any[];
     showCount?: boolean;
     condensed?: boolean;
     isLoading?: boolean;

package/dist/index.js

@@ -5086,7 +5086,7 @@ var DataTable = function(_param) {
         "columns",
         "data"
     ]);
-    var _props_texts, _table_getRowModel_rows, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7, _props_texts8, _props_texts9, _props_texts10;
+    var _props_texts, _props_itemsPerPage, _props_texts1, _table_getRowModel_rows, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6;
     var _React38_useState = _sliced_to_array(React38.useState([
         {
             id: props.defaultSort || "",
@@ -5121,12 +5121,19 @@ var DataTable = function(_param) {
             expanded: expanded
         }
     });
+    var pageText = ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.page) || "page";
+    var itemsPerPageOptions = (_props_itemsPerPage = props.itemsPerPage) === null || _props_itemsPerPage === void 0 ? void 0 : _props_itemsPerPage.map(function(item) {
+        return {
+            label: "".concat(item, " / ").concat(pageText),
+            value: item
+        };
+    });
     return /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4"
     }, /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-items-center"
     }, /* @__PURE__ */ React38.createElement(Input, {
-        placeholder: (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.searchPlaceholder,
+        placeholder: (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.searchPlaceholder,
         value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "",
         onChange: function(event) {
             return setGlobalFilter(event.target.value);
@@ -5164,38 +5171,38 @@ var DataTable = function(_param) {
     }) : /* @__PURE__ */ React38.createElement(TableRow, null, /* @__PURE__ */ React38.createElement(TableCell, {
         colSpan: columns.length,
         className: "hawa-h-24 hawa-text-center"
-    }, (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.noData))))), /* @__PURE__ */ React38.createElement("div", {
+    }, (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.noData))))), /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-items-center hawa-justify-between"
     }, !props.showCount && /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground"
     }), props.showCount && /* @__PURE__ */ React38.createElement("div", {
         className: "text-sm text-muted-foreground",
         dir: props.direction
-    }, /* @__PURE__ */ React38.createElement("span", null, (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.total), " ", /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length)), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", {
+    }, /* @__PURE__ */ React38.createElement("span", null, (_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.total), " ", /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 "
     }, /* @__PURE__ */ React38.createElement(DropdownMenu, {
         size: "sm",
-        width: "parent",
+        width: "sm",
         direction: props.direction,
-        items: [
+        items: itemsPerPageOptions || [
             {
-                label: "10 / ".concat((_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.page),
+                label: "10 / ".concat(pageText),
                 value: 10
             },
             {
-                label: "20 / ".concat((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.page),
+                label: "20 / ".concat(pageText),
                 value: 20
             },
             {
-                label: "30 / ".concat((_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.page),
+                label: "30 / ".concat(pageText),
                 value: 30
             },
             {
-                label: "40 / ".concat((_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.page),
+                label: "40 / ".concat(pageText),
                 value: 40
             },
             {
-                label: "50 / ".concat((_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.page),
+                label: "50 / ".concat(pageText),
                 value: 50
             }
         ],
@@ -5203,7 +5210,7 @@ var DataTable = function(_param) {
             variant: "outline",
             size: "icon",
             className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 "
-        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.page)),
+        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.page)),
         onItemSelect: function(e) {
             return table.setPageSize(Number(e));
         }
@@ -5211,13 +5218,14 @@ var DataTable = function(_param) {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  "
     }, /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-flex hawa-items-center hawa-gap-1"
-    }, /* @__PURE__ */ React38.createElement("div", null, (_props_texts9 = props.texts) === null || _props_texts9 === void 0 ? void 0 : _props_texts9.page), /* @__PURE__ */ React38.createElement("div", {
+    }, /* @__PURE__ */ React38.createElement("div", null, (_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.page), /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-gap-1"
     }, /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-font-bold"
-    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, (_props_texts10 = props.texts) === null || _props_texts10 === void 0 ? void 0 : _props_texts10.of), /* @__PURE__ */ React38.createElement("span", {
+    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.of), /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-font-bold"
     }, table.getPageCount())))), /* @__PURE__ */ React38.createElement(Button, {
+        "aria-label": "Previous Table Page",
         variant: "outline",
         size: "smallIcon",
         onClick: function() {
@@ -5237,6 +5245,7 @@ var DataTable = function(_param) {
         fillRule: "evenodd",
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
     }))), /* @__PURE__ */ React38.createElement(Button, {
+        "aria-label": "Next Table Page",
         variant: "outline",
         size: "smallIcon",
         onClick: function() {
@@ -5246,12 +5255,12 @@ var DataTable = function(_param) {
         className: cn(props.direction === "rtl" && "hawa-rotate-180")
     }, /* @__PURE__ */ React38.createElement("svg", {
         "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
         fill: "currentColor",
-        strokeWidth: "0",
-        viewBox: "0 0 16 16",
+        stroke: "currentColor",
+        width: "1em",
         height: "1em",
-        width: "1em"
+        strokeWidth: "0",
+        viewBox: "0 0 16 16"
     }, /* @__PURE__ */ React38.createElement("path", {
         fillRule: "evenodd",
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"

package/dist/index.mjs

@@ -4783,6 +4783,11 @@ var DataTable = ({
       expanded
     }
   });
+  const pageText = props.texts?.page || "page";
+  const itemsPerPageOptions = props.itemsPerPage?.map((item) => ({
+    label: `${item} / ${pageText}`,
+    value: item
+  }));
   return /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React38.createElement(
     Input,
     {
@@ -4840,19 +4845,19 @@ var DataTable = ({
     },
     /* @__PURE__ */ React38.createElement("span", null, props.texts?.total),
     " ",
-    /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length)
+    /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
   ), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, /* @__PURE__ */ React38.createElement(
     DropdownMenu,
     {
       size: "sm",
-      width: "parent",
+      width: "sm",
       direction: props.direction,
-      items: [
-        { label: `10 / ${props.texts?.page}`, value: 10 },
-        { label: `20 / ${props.texts?.page}`, value: 20 },
-        { label: `30 / ${props.texts?.page}`, value: 30 },
-        { label: `40 / ${props.texts?.page}`, value: 40 },
-        { label: `50 / ${props.texts?.page}`, value: 50 }
+      items: itemsPerPageOptions || [
+        { label: `10 / ${pageText}`, value: 10 },
+        { label: `20 / ${pageText}`, value: 20 },
+        { label: `30 / ${pageText}`, value: 30 },
+        { label: `40 / ${pageText}`, value: 40 },
+        { label: `50 / ${pageText}`, value: 50 }
       ],
       trigger: /* @__PURE__ */ React38.createElement(
         Button,
@@ -4868,6 +4873,7 @@ var DataTable = ({
   ), /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  " }, /* @__PURE__ */ React38.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React38.createElement("div", null, props.texts?.page), /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React38.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, props.texts?.of), /* @__PURE__ */ React38.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React38.createElement(
     Button,
     {
+      "aria-label": "Previous Table Page",
       variant: "outline",
       size: "smallIcon",
       onClick: () => table.previousPage(),
@@ -4896,6 +4902,7 @@ var DataTable = ({
   ), /* @__PURE__ */ React38.createElement(
     Button,
     {
+      "aria-label": "Next Table Page",
       variant: "outline",
       size: "smallIcon",
       onClick: () => table.nextPage(),
@@ -4906,12 +4913,12 @@ var DataTable = ({
       "svg",
       {
         "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
         fill: "currentColor",
-        strokeWidth: "0",
-        viewBox: "0 0 16 16",
+        stroke: "currentColor",
+        width: "1em",
         height: "1em",
-        width: "1em"
+        strokeWidth: "0",
+        viewBox: "0 0 16 16"
       },
       /* @__PURE__ */ React38.createElement(
         "path",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.11.17-next",
+  "version": "0.11.18-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {