@dust-tt/sparkle 0.2.240 → 0.2.241
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.
- package/dist/cjs/index.js +17 -21
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/DataTable.d.ts +5 -4
- package/dist/esm/components/DataTable.d.ts.map +1 -1
- package/dist/esm/components/DataTable.js +17 -21
- package/dist/esm/components/DataTable.js.map +1 -1
- package/dist/esm/stories/DataTable.stories.d.ts +1 -0
- package/dist/esm/stories/DataTable.stories.d.ts.map +1 -1
- package/dist/esm/stories/DataTable.stories.js +18 -4
- package/dist/esm/stories/DataTable.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DataTable.tsx +31 -11
- package/src/stories/DataTable.stories.tsx +43 -5
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Column, type ColumnDef, PaginationState,
|
|
1
|
+
import { Column, type ColumnDef, PaginationState, type SortingState } from "@tanstack/react-table";
|
|
2
2
|
import React, { ReactNode } from "react";
|
|
3
3
|
import { DropdownItemProps } from "../components/DropdownMenu";
|
|
4
4
|
declare module "@tanstack/react-table" {
|
|
@@ -25,11 +25,12 @@ interface DataTableProps<TData extends TBaseData> {
|
|
|
25
25
|
filterColumn?: string;
|
|
26
26
|
pagination?: PaginationState;
|
|
27
27
|
setPagination?: (pagination: PaginationState) => void;
|
|
28
|
-
initialColumnOrder?: SortingState;
|
|
29
28
|
columnsBreakpoints?: ColumnBreakpoint;
|
|
30
|
-
|
|
29
|
+
sorting?: SortingState;
|
|
30
|
+
setSorting?: (sorting: SortingState) => void;
|
|
31
|
+
isServerSideSorting?: boolean;
|
|
31
32
|
}
|
|
32
|
-
export declare function DataTable<TData extends TBaseData>({ data, totalRowCount, columns, className, widthClassName, filter, filterColumn,
|
|
33
|
+
export declare function DataTable<TData extends TBaseData>({ data, totalRowCount, columns, className, widthClassName, filter, filterColumn, columnsBreakpoints, pagination, setPagination, sorting, setSorting, isServerSideSorting, }: DataTableProps<TData>): React.JSX.Element;
|
|
33
34
|
export declare namespace DataTable {
|
|
34
35
|
var Root: ({ children, ...props }: DataTableRootProps) => React.JSX.Element;
|
|
35
36
|
var Header: ({ children, className, ...props }: HeaderProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,SAAS,EAOd,eAAe,EACf,
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,38 +17,34 @@ function shouldRenderColumn(windowWidth, breakpoint) {
|
|
|
17
17
|
return windowWidth >= breakpoints[breakpoint];
|
|
18
18
|
}
|
|
19
19
|
export function DataTable(_a) {
|
|
20
|
-
var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, _b = _a.widthClassName, widthClassName = _b === void 0 ? "s-w-full s-max-w-4xl" : _b, filter = _a.filter, filterColumn = _a.filterColumn,
|
|
20
|
+
var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, _b = _a.widthClassName, widthClassName = _b === void 0 ? "s-w-full s-max-w-4xl" : _b, filter = _a.filter, filterColumn = _a.filterColumn, _c = _a.columnsBreakpoints, columnsBreakpoints = _c === void 0 ? {} : _c, pagination = _a.pagination, setPagination = _a.setPagination, sorting = _a.sorting, setSorting = _a.setSorting, _d = _a.isServerSideSorting, isServerSideSorting = _d === void 0 ? false : _d;
|
|
21
21
|
var windowSize = useWindowSize();
|
|
22
|
-
var _d = __read(useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _d[0], setSorting = _d[1];
|
|
23
22
|
var _e = __read(useState([]), 2), columnFilters = _e[0], setColumnFilters = _e[1];
|
|
24
23
|
var isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
|
|
24
|
+
var isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
|
|
25
25
|
var onPaginationChange = pagination && setPagination
|
|
26
26
|
? function (updater) {
|
|
27
27
|
var newValue = typeof updater === "function" ? updater(pagination) : updater;
|
|
28
28
|
setPagination(newValue);
|
|
29
29
|
}
|
|
30
30
|
: undefined;
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
var onSortingChange = sorting && setSorting
|
|
32
|
+
? function (updater) {
|
|
33
|
+
var newValue = typeof updater === "function" ? updater(sorting) : updater;
|
|
34
|
+
setSorting(newValue);
|
|
35
|
+
}
|
|
36
|
+
: undefined;
|
|
37
|
+
var table = useReactTable(__assign(__assign(__assign(__assign({ data: data, columns: columns, rowCount: totalRowCount, manualPagination: isServerSidePagination, manualSorting: isServerSideSorting }, (isServerSideSorting && {
|
|
38
|
+
onSortingChange: onSortingChange,
|
|
39
|
+
})), { getCoreRowModel: getCoreRowModel() }), (!isServerSideSorting && {
|
|
38
40
|
getSortedRowModel: getSortedRowModel(),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
columnFilters: columnFilters,
|
|
44
|
-
sorting: isServerSidePagination ? undefined : sorting,
|
|
45
|
-
pagination: pagination,
|
|
46
|
-
},
|
|
47
|
-
initialState: {
|
|
41
|
+
enableSorting: isClientSideSortingEnabled,
|
|
42
|
+
})), { getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, onColumnFiltersChange: setColumnFilters, state: __assign(__assign({ columnFilters: columnFilters }, (isServerSideSorting && {
|
|
43
|
+
sorting: sorting,
|
|
44
|
+
})), { pagination: pagination }), initialState: {
|
|
48
45
|
pagination: pagination,
|
|
49
|
-
|
|
50
|
-
onPaginationChange: onPaginationChange
|
|
51
|
-
});
|
|
46
|
+
sorting: sorting,
|
|
47
|
+
}, onPaginationChange: onPaginationChange }));
|
|
52
48
|
useEffect(function () {
|
|
53
49
|
var _a;
|
|
54
50
|
if (filterColumn) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/components/DataTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/components/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ declare const meta: {
|
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
8
|
export declare const DataTableExample: () => React.JSX.Element;
|
|
9
|
+
export declare const DataTableClientSideSortingExample: () => React.JSX.Element;
|
|
9
10
|
export declare const DataTablePaginatedExample: () => React.JSX.Element;
|
|
10
11
|
export declare const DataTablePaginatedServerSideExample: () => React.JSX.Element;
|
|
11
12
|
//# sourceMappingURL=DataTable.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;AA6KpB,eAAO,MAAM,gBAAgB,yBAmB5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"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;AA6KpB,eAAO,MAAM,gBAAgB,yBAmB5B,CAAC;AAEF,eAAO,MAAM,iCAAiC,yBAwB7C,CAAC;AAEF,eAAO,MAAM,yBAAyB,yBA2BrC,CAAC;AAEF,eAAO,MAAM,mCAAmC,yBAgD/C,CAAC"}
|
|
@@ -147,6 +147,13 @@ export var DataTableExample = function () {
|
|
|
147
147
|
React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
|
|
148
148
|
React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columns })));
|
|
149
149
|
};
|
|
150
|
+
export var DataTableClientSideSortingExample = function () {
|
|
151
|
+
var _a = __read(React.useState([{ id: "name", desc: true }]), 2), sorting = _a[0], setSorting = _a[1];
|
|
152
|
+
var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
|
|
153
|
+
return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
|
|
154
|
+
React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
|
|
155
|
+
React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", columns: columns, columnsBreakpoints: { lastUpdated: "sm" }, sorting: sorting, setSorting: setSorting })));
|
|
156
|
+
};
|
|
150
157
|
export var DataTablePaginatedExample = function () {
|
|
151
158
|
var _a = __read(React.useState({
|
|
152
159
|
pageIndex: 0,
|
|
@@ -155,19 +162,26 @@ export var DataTablePaginatedExample = function () {
|
|
|
155
162
|
var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
|
|
156
163
|
return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
|
|
157
164
|
React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
|
|
158
|
-
React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns,
|
|
165
|
+
React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, columnsBreakpoints: { lastUpdated: "sm" } })));
|
|
159
166
|
};
|
|
160
167
|
export var DataTablePaginatedServerSideExample = function () {
|
|
161
168
|
var _a = __read(React.useState({
|
|
162
169
|
pageIndex: 0,
|
|
163
170
|
pageSize: 2,
|
|
164
171
|
}), 2), pagination = _a[0], setPagination = _a[1];
|
|
165
|
-
var _b = __read(React.useState(""), 2),
|
|
172
|
+
var _b = __read(React.useState([{ id: "name", desc: true }]), 2), sorting = _b[0], setSorting = _b[1];
|
|
173
|
+
var _c = __read(React.useState(""), 2), filter = _c[0], setFilter = _c[1];
|
|
166
174
|
var rows = useMemo(function () {
|
|
175
|
+
if (sorting.length > 0) {
|
|
176
|
+
var order_1 = sorting[0].desc ? -1 : 1;
|
|
177
|
+
return data.sort(function (a, b) {
|
|
178
|
+
return a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order_1;
|
|
179
|
+
}).slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
|
|
180
|
+
}
|
|
167
181
|
return data.slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
|
|
168
|
-
}, [data, pagination]);
|
|
182
|
+
}, [data, pagination, sorting]);
|
|
169
183
|
return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
|
|
170
184
|
React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
|
|
171
|
-
React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: rows, totalRowCount: data.length, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns,
|
|
185
|
+
React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: rows, totalRowCount: data.length, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, sorting: sorting, setSorting: setSorting, columnsBreakpoints: { lastUpdated: "sm" }, isServerSideSorting: true })));
|
|
172
186
|
};
|
|
173
187
|
//# sourceMappingURL=DataTable.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
getPaginationRowModel,
|
|
9
9
|
getSortedRowModel,
|
|
10
10
|
PaginationState,
|
|
11
|
-
SortingFn,
|
|
12
11
|
type SortingState,
|
|
13
12
|
Updater,
|
|
14
13
|
useReactTable,
|
|
@@ -57,9 +56,10 @@ interface DataTableProps<TData extends TBaseData> {
|
|
|
57
56
|
filterColumn?: string;
|
|
58
57
|
pagination?: PaginationState;
|
|
59
58
|
setPagination?: (pagination: PaginationState) => void;
|
|
60
|
-
initialColumnOrder?: SortingState;
|
|
61
59
|
columnsBreakpoints?: ColumnBreakpoint;
|
|
62
|
-
|
|
60
|
+
sorting?: SortingState;
|
|
61
|
+
setSorting?: (sorting: SortingState) => void;
|
|
62
|
+
isServerSideSorting?: boolean;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
function shouldRenderColumn(
|
|
@@ -80,18 +80,20 @@ export function DataTable<TData extends TBaseData>({
|
|
|
80
80
|
widthClassName = "s-w-full s-max-w-4xl",
|
|
81
81
|
filter,
|
|
82
82
|
filterColumn,
|
|
83
|
-
initialColumnOrder,
|
|
84
83
|
columnsBreakpoints = {},
|
|
85
84
|
pagination,
|
|
86
85
|
setPagination,
|
|
86
|
+
sorting,
|
|
87
|
+
setSorting,
|
|
88
|
+
isServerSideSorting = false,
|
|
87
89
|
}: DataTableProps<TData>) {
|
|
88
90
|
const windowSize = useWindowSize();
|
|
89
|
-
|
|
90
|
-
initialColumnOrder ?? []
|
|
91
|
-
);
|
|
91
|
+
|
|
92
92
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
|
93
93
|
|
|
94
94
|
const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
|
|
95
|
+
const isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
|
|
96
|
+
|
|
95
97
|
const onPaginationChange =
|
|
96
98
|
pagination && setPagination
|
|
97
99
|
? (updater: Updater<PaginationState>) => {
|
|
@@ -101,26 +103,44 @@ export function DataTable<TData extends TBaseData>({
|
|
|
101
103
|
}
|
|
102
104
|
: undefined;
|
|
103
105
|
|
|
106
|
+
const onSortingChange =
|
|
107
|
+
sorting && setSorting
|
|
108
|
+
? (updater: Updater<SortingState>) => {
|
|
109
|
+
const newValue =
|
|
110
|
+
typeof updater === "function" ? updater(sorting) : updater;
|
|
111
|
+
setSorting(newValue);
|
|
112
|
+
}
|
|
113
|
+
: undefined;
|
|
114
|
+
|
|
104
115
|
const table = useReactTable({
|
|
105
116
|
data,
|
|
106
117
|
columns,
|
|
107
118
|
rowCount: totalRowCount,
|
|
108
119
|
manualPagination: isServerSidePagination,
|
|
109
|
-
|
|
120
|
+
manualSorting: isServerSideSorting,
|
|
121
|
+
...(isServerSideSorting && {
|
|
122
|
+
onSortingChange: onSortingChange,
|
|
123
|
+
}),
|
|
110
124
|
getCoreRowModel: getCoreRowModel(),
|
|
111
|
-
|
|
125
|
+
...(!isServerSideSorting && {
|
|
126
|
+
getSortedRowModel: getSortedRowModel(),
|
|
127
|
+
enableSorting: isClientSideSortingEnabled,
|
|
128
|
+
}),
|
|
112
129
|
getFilteredRowModel: getFilteredRowModel(),
|
|
113
130
|
getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
|
|
114
131
|
onColumnFiltersChange: setColumnFilters,
|
|
115
132
|
state: {
|
|
116
133
|
columnFilters,
|
|
117
|
-
|
|
134
|
+
...(isServerSideSorting && {
|
|
135
|
+
sorting,
|
|
136
|
+
}),
|
|
118
137
|
pagination,
|
|
119
138
|
},
|
|
120
139
|
initialState: {
|
|
121
140
|
pagination,
|
|
141
|
+
sorting,
|
|
122
142
|
},
|
|
123
|
-
onPaginationChange
|
|
143
|
+
onPaginationChange,
|
|
124
144
|
});
|
|
125
145
|
|
|
126
146
|
useEffect(() => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Meta } from "@storybook/react";
|
|
2
|
-
import { ColumnDef, PaginationState } from "@tanstack/react-table";
|
|
2
|
+
import { ColumnDef, PaginationState, SortingState } from "@tanstack/react-table";
|
|
3
3
|
import React, { useMemo } from "react";
|
|
4
4
|
|
|
5
5
|
import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
|
|
@@ -206,6 +206,32 @@ export const DataTableExample = () => {
|
|
|
206
206
|
);
|
|
207
207
|
};
|
|
208
208
|
|
|
209
|
+
export const DataTableClientSideSortingExample = () => {
|
|
210
|
+
const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
|
|
211
|
+
const [filter, setFilter] = React.useState<string>("");
|
|
212
|
+
|
|
213
|
+
return (
|
|
214
|
+
<div className="s-w-full s-max-w-4xl s-overflow-x-auto">
|
|
215
|
+
<Input
|
|
216
|
+
name="filter"
|
|
217
|
+
placeholder="Filter"
|
|
218
|
+
value={filter}
|
|
219
|
+
onChange={(v) => setFilter(v)}
|
|
220
|
+
/>
|
|
221
|
+
<DataTable
|
|
222
|
+
className="s-w-full s-max-w-4xl s-overflow-x-auto"
|
|
223
|
+
data={data}
|
|
224
|
+
filter={filter}
|
|
225
|
+
filterColumn="name"
|
|
226
|
+
columns={columns}
|
|
227
|
+
columnsBreakpoints={{ lastUpdated: "sm" }}
|
|
228
|
+
sorting={sorting}
|
|
229
|
+
setSorting={setSorting}
|
|
230
|
+
/>
|
|
231
|
+
</div>
|
|
232
|
+
);
|
|
233
|
+
};
|
|
234
|
+
|
|
209
235
|
export const DataTablePaginatedExample = () => {
|
|
210
236
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
|
211
237
|
pageIndex: 0,
|
|
@@ -229,7 +255,6 @@ export const DataTablePaginatedExample = () => {
|
|
|
229
255
|
pagination={pagination}
|
|
230
256
|
setPagination={setPagination}
|
|
231
257
|
columns={columns}
|
|
232
|
-
initialColumnOrder={[{ id: "name", desc: false }]}
|
|
233
258
|
columnsBreakpoints={{ lastUpdated: "sm" }}
|
|
234
259
|
/>
|
|
235
260
|
</div>
|
|
@@ -241,14 +266,25 @@ export const DataTablePaginatedServerSideExample = () => {
|
|
|
241
266
|
pageIndex: 0,
|
|
242
267
|
pageSize: 2,
|
|
243
268
|
});
|
|
269
|
+
const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
|
|
244
270
|
const [filter, setFilter] = React.useState<string>("");
|
|
245
271
|
const rows = useMemo(() => {
|
|
272
|
+
if (sorting.length > 0) {
|
|
273
|
+
const order = sorting[0].desc ? -1: 1;
|
|
274
|
+
return data.sort(
|
|
275
|
+
(a: Data, b: Data) => {
|
|
276
|
+
return a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order
|
|
277
|
+
}
|
|
278
|
+
).slice(
|
|
279
|
+
pagination.pageIndex * pagination.pageSize,
|
|
280
|
+
(pagination.pageIndex + 1) * pagination.pageSize
|
|
281
|
+
);
|
|
282
|
+
}
|
|
246
283
|
return data.slice(
|
|
247
284
|
pagination.pageIndex * pagination.pageSize,
|
|
248
285
|
(pagination.pageIndex + 1) * pagination.pageSize
|
|
249
286
|
);
|
|
250
|
-
}, [data, pagination]);
|
|
251
|
-
|
|
287
|
+
}, [data, pagination, sorting]);
|
|
252
288
|
return (
|
|
253
289
|
<div className="s-w-full s-max-w-4xl s-overflow-x-auto">
|
|
254
290
|
<Input
|
|
@@ -266,8 +302,10 @@ export const DataTablePaginatedServerSideExample = () => {
|
|
|
266
302
|
pagination={pagination}
|
|
267
303
|
setPagination={setPagination}
|
|
268
304
|
columns={columns}
|
|
269
|
-
|
|
305
|
+
sorting={sorting}
|
|
306
|
+
setSorting={setSorting}
|
|
270
307
|
columnsBreakpoints={{ lastUpdated: "sm" }}
|
|
308
|
+
isServerSideSorting={true}
|
|
271
309
|
/>
|
|
272
310
|
</div>
|
|
273
311
|
);
|