@dust-tt/sparkle 0.2.225 → 0.2.226

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/esm/stories/DataTable.stories.d.ts

@@ -6,4 +6,6 @@ declare const meta: {
 };
 export default meta;
 export declare const DataTableExample: () => React.JSX.Element;
+export declare const DataTablePaginatedExample: () => React.JSX.Element;
+export declare const DataTablePaginatedServerSideExample: () => React.JSX.Element;
 //# sourceMappingURL=DataTable.stories.d.ts.map

package/dist/esm/stories/DataTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAc,MAAM,uBAAuB,CAAC;AAE9D,QAAA,MAAM,IAAI;;;CAGwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,gBAAgB,yBA6I5B,CAAC"}
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAc,MAAM,uBAAuB,CAAC;AAE9D,QAAA,MAAM,IAAI;;;CAGwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AA+IpB,eAAO,MAAM,gBAAgB,yBAmB5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,yBA2BrC,CAAC;AAEF,eAAO,MAAM,mCAAmC,yBAkC/C,CAAC"}

package/dist/esm/stories/DataTable.stories.js

@@ -1,116 +1,143 @@
-import React from "react";
+import { __read } from "tslib";
+import React, { useMemo } from "react";
+import { Input } from "../components/Input";
 import { DataTable, FolderIcon } from "../index_with_tw_base";
 var meta = {
     title: "Components/DataTable",
     component: DataTable,
 };
 export default meta;
+var data = [
+    {
+        name: "Soupinou with tooltip on avatar",
+        usedBy: 100,
+        addedBy: "User1",
+        lastUpdated: "July 8, 2023",
+        size: "32kb",
+        avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
+        avatarTooltipLabel: "Meow",
+        roundedAvatar: true,
+        onClick: function () { return console.log("hehe"); },
+    },
+    {
+        name: "Marketing",
+        description: "(23 items)",
+        usedBy: 8,
+        addedBy: "User1",
+        lastUpdated: "July 8, 2023",
+        size: "32kb",
+        avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+        roundedAvatar: true,
+        onClick: function () { return alert("Marketing clicked"); },
+    },
+    {
+        name: "Design",
+        usedBy: 2,
+        addedBy: "User2",
+        lastUpdated: "2023-07-09",
+        size: "64kb",
+        icon: FolderIcon,
+        moreMenuItems: [
+            {
+                label: "Edit (disabled)",
+                onClick: function () { return alert("Design menu clicked"); },
+                disabled: true,
+            },
+        ],
+        onClick: function () { return alert("Design clicked"); },
+    },
+    {
+        name: "design",
+        usedBy: 3,
+        addedBy: "User21",
+        lastUpdated: "2023-07-09",
+        size: "64kb",
+        icon: FolderIcon,
+        moreMenuItems: [
+            {
+                label: "Edit",
+                onClick: function () { return alert("Design menu clicked"); },
+            },
+        ],
+    },
+    {
+        name: "Development",
+        usedBy: 5,
+        addedBy: "User3",
+        lastUpdated: "2023-07-07",
+        size: "128kb",
+    },
+    {
+        name: "Sales",
+        usedBy: 10,
+        addedBy: "User4",
+        lastUpdated: "2023-07-10",
+        size: "16kb",
+    },
+    {
+        name: "HR",
+        usedBy: 3,
+        addedBy: "User5",
+        lastUpdated: "2023-07-06",
+        size: "48kb",
+    },
+];
+var columns = [
+    {
+        accessorKey: "name",
+        header: "Name",
+        sortingFn: "text",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, { avatarUrl: info.row.original.avatarUrl, avatarTooltipLabel: info.row.original.avatarTooltipLabel, icon: info.row.original.icon, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)); },
+    },
+    {
+        accessorKey: "usedBy",
+        header: "Used by",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.usedBy)); },
+    },
+    {
+        accessorKey: "addedBy",
+        header: "Added by",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.addedBy)); },
+    },
+    {
+        accessorKey: "lastUpdated",
+        header: "Last updated",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.lastUpdated)); },
+        enableSorting: false,
+    },
+    {
+        accessorKey: "size",
+        header: "Size",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.size)); },
+    },
+];
 export var DataTableExample = function () {
-    var data = [
-        {
-            name: "Soupinou with tooltip on avatar",
-            usedBy: 100,
-            addedBy: "User1",
-            lastUpdated: "July 8, 2023",
-            size: "32kb",
-            avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
-            avatarTooltipLabel: "Meow",
-            roundedAvatar: true,
-            onClick: function () { return console.log("hehe"); },
-        },
-        {
-            name: "Marketing",
-            description: "(23 items)",
-            usedBy: 8,
-            addedBy: "User1",
-            lastUpdated: "July 8, 2023",
-            size: "32kb",
-            avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-            roundedAvatar: true,
-            onClick: function () { return alert("Marketing clicked"); },
-        },
-        {
-            name: "Design",
-            usedBy: 2,
-            addedBy: "User2",
-            lastUpdated: "2023-07-09",
-            size: "64kb",
-            icon: FolderIcon,
-            moreMenuItems: [
-                {
-                    label: "Edit (disabled)",
-                    onClick: function () { return alert("Design menu clicked"); },
-                    disabled: true,
-                },
-            ],
-            onClick: function () { return alert("Design clicked"); },
-        },
-        {
-            name: "design",
-            usedBy: 3,
-            addedBy: "User21",
-            lastUpdated: "2023-07-09",
-            size: "64kb",
-            icon: FolderIcon,
-            moreMenuItems: [
-                {
-                    label: "Edit",
-                    onClick: function () { return alert("Design menu clicked"); },
-                },
-            ],
-        },
-        {
-            name: "Development",
-            usedBy: 5,
-            addedBy: "User3",
-            lastUpdated: "2023-07-07",
-            size: "128kb",
-        },
-        {
-            name: "Sales",
-            usedBy: 10,
-            addedBy: "User4",
-            lastUpdated: "2023-07-10",
-            size: "16kb",
-        },
-        {
-            name: "HR",
-            usedBy: 3,
-            addedBy: "User5",
-            lastUpdated: "2023-07-06",
-            size: "48kb",
-        },
-    ];
-    var columns = [
-        {
-            accessorKey: "name",
-            header: "Name",
-            sortingFn: "text",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, { avatarUrl: info.row.original.avatarUrl, avatarTooltipLabel: info.row.original.avatarTooltipLabel, icon: info.row.original.icon, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)); },
-        },
-        {
-            accessorKey: "usedBy",
-            header: "Used by",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.usedBy)); },
-        },
-        {
-            accessorKey: "addedBy",
-            header: "Added by",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.addedBy)); },
-        },
-        {
-            accessorKey: "lastUpdated",
-            header: "Last updated",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.lastUpdated)); },
-            enableSorting: false,
-        },
-        {
-            accessorKey: "size",
-            header: "Size",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.size)); },
-        },
-    ];
+    var _a = __read(React.useState(""), 2), filter = _a[0], setFilter = _a[1];
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(DataTable, { data: data, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columns })));
+};
+export var DataTablePaginatedExample = function () {
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 2,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
+    return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
+};
+export var DataTablePaginatedServerSideExample = function () {
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 2,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
+    var rows = useMemo(function () {
+        return data.slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
+    }, [data, pagination]);
+    return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: rows, totalRowCount: data.length, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
 };
 //# sourceMappingURL=DataTable.stories.js.map

package/dist/esm/stories/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/Pagination.stories.d.ts

@@ -8,4 +8,5 @@ export default meta;
 export declare const PaginationSM: () => React.JSX.Element;
 export declare const PaginationXS: () => React.JSX.Element;
 export declare const PaginationNoPageButtons: () => React.JSX.Element;
+export declare const PaginationWithUrl: () => React.JSX.Element;
 //# sourceMappingURL=Pagination.stories.d.ts.map

package/dist/esm/stories/Pagination.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAA,MAAM,IAAI;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,YAAY,yBAQxB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAUxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAWnC,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAA,MAAM,IAAI;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,eAAO,MAAM,YAAY,yBAYxB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAcxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAenC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBAa7B,CAAC"}

package/dist/esm/stories/Pagination.stories.js

@@ -1,4 +1,6 @@
+import { __read } from "tslib";
 import React from "react";
+import { usePaginationFromUrl } from "../hooks/usePaginationFromUrl";
 import { Pagination } from "../index_with_tw_base";
 var meta = {
     title: "Components/Pagination",
@@ -6,12 +8,32 @@ var meta = {
 };
 export default meta;
 export var PaginationSM = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, pagination: pagination, setPagination: setPagination }));
 };
 export var PaginationXS = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, size: "xs", showDetails: false, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, size: "xs", showDetails: false, pagination: pagination, setPagination: setPagination }));
 };
 export var PaginationNoPageButtons = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, size: "xs", showDetails: false, showPageButtons: false, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, size: "xs", showDetails: false, showPageButtons: false, pagination: pagination, setPagination: setPagination }));
+};
+export var PaginationWithUrl = function () {
+    var _a = usePaginationFromUrl("example", 50), pagination = _a.pagination, setPagination = _a.setPagination;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "s-p-2" },
+            "Current hash: ",
+            location.hash),
+        React.createElement(Pagination, { rowCount: 960, pagination: pagination, setPagination: setPagination })));
 };
 //# sourceMappingURL=Pagination.stories.js.map

package/dist/esm/stories/Pagination.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;CACY,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACrC,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;CACY,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IAC/B,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,KAAK,EACtB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG;IACzB,IAAA,KAAgC,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC,EAAjE,UAAU,gBAAA,EAAE,aAAa,mBAAwC,CAAC;IAE1E,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,OAAO;;YAAgB,QAAQ,CAAC,IAAI,CAAO;QAC1D,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/sparkle.css

@@ -3016,6 +3016,10 @@ select {
   padding: 0px;
 }
 
+.s-p-1 {
+  padding: 0.25rem;
+}
+
 .s-p-10 {
   padding: 2.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.225",
+  "version": "0.2.226",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/DataTable.tsx

@@ -4,9 +4,12 @@ import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
   SortingFn,
   type SortingState,
+  Updater,
   useReactTable,
 } from "@tanstack/react-table";
 import React, { ReactNode, useEffect, useState } from "react";
@@ -17,6 +20,7 @@ import {
   DropdownMenu,
 } from "@sparkle/components/DropdownMenu";
 import { IconButton } from "@sparkle/components/IconButton";
+import { Pagination } from "@sparkle/components/Pagination";
 import { Tooltip } from "@sparkle/components/Tooltip";
 import { ArrowDownIcon, ArrowUpIcon, MoreIcon } from "@sparkle/icons";
 import { classNames } from "@sparkle/lib/utils";
@@ -35,10 +39,13 @@ interface ColumnBreakpoint {
 
 interface DataTableProps<TData extends TBaseData> {
   data: TData[];
+  totalRowCount?: number;
   columns: ColumnDef<TData, any>[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   className?: string;
   filter?: string;
   filterColumn?: string;
+  pagination?: PaginationState;
+  setPagination?: (pagination: PaginationState) => void;
   initialColumnOrder?: SortingState;
   columnsBreakpoints?: ColumnBreakpoint;
   sortingFn?: SortingFn<TData>;
@@ -56,12 +63,15 @@ function shouldRenderColumn(
 
 export function DataTable<TData extends TBaseData>({
   data,
+  totalRowCount,
   columns,
   className,
   filter,
   filterColumn,
   initialColumnOrder,
   columnsBreakpoints = {},
+  pagination,
+  setPagination,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
   const [sorting, setSorting] = useState<SortingState>(
@@ -69,18 +79,36 @@ export function DataTable<TData extends TBaseData>({
   );
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
+  const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+  const onPaginationChange =
+    pagination && setPagination
+      ? (updater: Updater<PaginationState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(pagination) : updater;
+          setPagination(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
+    rowCount: totalRowCount,
+    manualPagination: isServerSidePagination,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
     state: {
       columnFilters,
-      sorting,
+      sorting: isServerSidePagination ? undefined : sorting,
+      pagination,
+    },
+    initialState: {
+      pagination,
     },
+    onPaginationChange: onPaginationChange,
   });
 
   useEffect(() => {
@@ -90,81 +118,92 @@ export function DataTable<TData extends TBaseData>({
   }, [filter, filterColumn]);
 
   return (
-    <DataTable.Root className={className}>
-      <DataTable.Header>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <DataTable.Row key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              const breakpoint = columnsBreakpoints[header.id];
-              if (
-                !windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)
-              ) {
-                return null;
-              }
-              return (
-                <DataTable.Head
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                  className={classNames(
-                    header.column.getCanSort() ? "s-cursor-pointer" : ""
-                  )}
-                >
-                  <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getCanSort() && (
-                      <Icon
-                        visual={
-                          header.column.getIsSorted() === "asc"
-                            ? ArrowUpIcon
-                            : header.column.getIsSorted() === "desc"
-                              ? ArrowDownIcon
-                              : ArrowDownIcon
-                        }
-                        size="xs"
-                        className={classNames(
-                          "s-ml-1",
-                          header.column.getIsSorted()
-                            ? "s-opacity-100"
-                            : "s-opacity-0"
-                        )}
-                      />
+    <div className="s-flex s-flex-col s-gap-2">
+      <DataTable.Root className={className}>
+        <DataTable.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataTable.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const breakpoint = columnsBreakpoints[header.id];
+                if (
+                  !windowSize.width ||
+                  !shouldRenderColumn(windowSize.width, breakpoint)
+                ) {
+                  return null;
+                }
+                return (
+                  <DataTable.Head
+                    key={header.id}
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={classNames(
+                      header.column.getCanSort() ? "s-cursor-pointer" : ""
                     )}
-                  </div>
-                </DataTable.Head>
-              );
-            })}
-          </DataTable.Row>
-        ))}
-      </DataTable.Header>
-      <DataTable.Body>
-        {table.getRowModel().rows.map((row) => (
-          <DataTable.Row
-            key={row.id}
-            onClick={row.original.onClick}
-            moreMenuItems={row.original.moreMenuItems}
-          >
-            {row.getVisibleCells().map((cell) => {
-              const breakpoint = columnsBreakpoints[cell.column.id];
-              if (
-                !windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)
-              ) {
-                return null;
-              }
-              return (
-                <DataTable.Cell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </DataTable.Cell>
-              );
-            })}
-          </DataTable.Row>
-        ))}
-      </DataTable.Body>
-    </DataTable.Root>
+                  >
+                    <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {header.column.getCanSort() && (
+                        <Icon
+                          visual={
+                            header.column.getIsSorted() === "asc"
+                              ? ArrowUpIcon
+                              : header.column.getIsSorted() === "desc"
+                                ? ArrowDownIcon
+                                : ArrowDownIcon
+                          }
+                          size="xs"
+                          className={classNames(
+                            "s-ml-1",
+                            header.column.getIsSorted()
+                              ? "s-opacity-100"
+                              : "s-opacity-0"
+                          )}
+                        />
+                      )}
+                    </div>
+                  </DataTable.Head>
+                );
+              })}
+            </DataTable.Row>
+          ))}
+        </DataTable.Header>
+        <DataTable.Body>
+          {table.getRowModel().rows.map((row) => (
+            <DataTable.Row
+              key={row.id}
+              onClick={row.original.onClick}
+              moreMenuItems={row.original.moreMenuItems}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const breakpoint = columnsBreakpoints[cell.column.id];
+                if (
+                  !windowSize.width ||
+                  !shouldRenderColumn(windowSize.width, breakpoint)
+                ) {
+                  return null;
+                }
+                return (
+                  <DataTable.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </DataTable.Cell>
+                );
+              })}
+            </DataTable.Row>
+          ))}
+        </DataTable.Body>
+      </DataTable.Root>
+      {pagination && (
+        <div className="s-p-1">
+          <Pagination
+            pagination={table.getState().pagination}
+            setPagination={table.setPagination}
+            rowCount={table.getRowCount()}
+          />
+        </div>
+      )}
+    </div>
   );
 }