mantine-datatable-extended 0.1.0 → 0.2.0
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/LICENSE +21 -0
- package/README.md +167 -0
- package/dist/data-table-provider.type-CblXE_l1.d.ts +198 -0
- package/dist/index.d.ts +78 -121
- package/dist/index.mjs +1 -1
- package/dist/server.d.ts +3 -2
- package/dist/server.mjs +1 -1
- package/package.json +34 -14
- package/dist/data-table-extend.type-Dh8nSBAW.d.ts +0 -36
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 mantine-datatable-extended
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# Mantine DataTable Extended
|
|
2
|
+
|
|
3
|
+
An extension library for [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/), providing powerful and easy-to-use features for building data tables in React applications.
|
|
4
|
+
|
|
5
|
+
## Why this library?
|
|
6
|
+
|
|
7
|
+
Mantine and Mantine DataTable are excellent libraries, trusted and used by many developers. However, during use, I noticed some limitations:
|
|
8
|
+
|
|
9
|
+
- **Column toggling**: No dedicated component for managing column visibility
|
|
10
|
+
- **Multi-column sorting**: Can only sort by one column at a time
|
|
11
|
+
- **Search and Filter**: Not standardized, requiring full customization
|
|
12
|
+
- **Pagination**: Fixed to footer, causing issues with async data loading
|
|
13
|
+
|
|
14
|
+
## Key Features
|
|
15
|
+
|
|
16
|
+
### 🎯 Standardized Components
|
|
17
|
+
|
|
18
|
+
- **DataTableSearch**: Search with multi-column selection
|
|
19
|
+
- **DataTableFilter**: Filter data with various filter types (text, number, date, select, range...)
|
|
20
|
+
- **DataTableSortList**: Sort by multiple columns simultaneously
|
|
21
|
+
- **DataTableColumnsToggle**: Show/hide columns
|
|
22
|
+
- **DataTablePagination**: Flexible pagination that can be placed anywhere
|
|
23
|
+
|
|
24
|
+
### 🔗 URL State Management
|
|
25
|
+
|
|
26
|
+
- Uses [Nuqs](https://nuqs.dev/) to store state in URL
|
|
27
|
+
- Shareable links - share URLs with filters/search/sort applied
|
|
28
|
+
- SEO-friendly with SSR support
|
|
29
|
+
- Easy integration with server-side rendering
|
|
30
|
+
|
|
31
|
+
### 🚀 Server-Side Integration
|
|
32
|
+
|
|
33
|
+
- Next.js App Router support
|
|
34
|
+
- Server-side data prefetching
|
|
35
|
+
- Hybrid fetching with React Query
|
|
36
|
+
- Type-safe with TypeScript
|
|
37
|
+
|
|
38
|
+
### 🎨 Developer Experience
|
|
39
|
+
|
|
40
|
+
- Full TypeScript with type inference
|
|
41
|
+
- Consistent and easy-to-use API
|
|
42
|
+
- Customizable i18n for all text
|
|
43
|
+
- Flexible layout - arrange components as needed
|
|
44
|
+
|
|
45
|
+
## Installation
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
pnpm add mantine-datatable-extended mantine-datatable @mantine/dates dayjs nuqs zod
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
**Peer Dependencies:**
|
|
52
|
+
|
|
53
|
+
- `@mantine/core` >= 8.3
|
|
54
|
+
- `@mantine/dates` >= 8.3
|
|
55
|
+
- `@mantine/hooks` >= 8.3
|
|
56
|
+
- `@tabler/icons-react` >= 3.35
|
|
57
|
+
- `clsx` >= 2
|
|
58
|
+
- `dayjs` >= 1.11
|
|
59
|
+
- `mantine-datatable` >= 8.3
|
|
60
|
+
- `nuqs` >= 2.8
|
|
61
|
+
- `react` >= 19
|
|
62
|
+
- `react-dom` >= 19
|
|
63
|
+
- `zod` >= 4.1
|
|
64
|
+
|
|
65
|
+
## Quick Start
|
|
66
|
+
|
|
67
|
+
### Step 1: Setup Nuqs Adapter
|
|
68
|
+
|
|
69
|
+
This library uses Nuqs for managing query parameters. You need to wrap your app with Nuqs Adapter in your `app/layout.tsx` or `src/app/layout.tsx` file:
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { NuqsAdapter } from "nuqs/adapters/next/app";
|
|
73
|
+
|
|
74
|
+
export default function RootLayout({ children }) {
|
|
75
|
+
return (
|
|
76
|
+
<html>
|
|
77
|
+
<body>
|
|
78
|
+
<NuqsAdapter>
|
|
79
|
+
<MantineProvider>{children}</MantineProvider>
|
|
80
|
+
</NuqsAdapter>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Step 2: Create Data Table
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
"use client";
|
|
91
|
+
|
|
92
|
+
import {
|
|
93
|
+
DataTableExtended,
|
|
94
|
+
DataTableProvider,
|
|
95
|
+
DataTableSearch,
|
|
96
|
+
DataTableFilter,
|
|
97
|
+
DataTableSortList,
|
|
98
|
+
DataTableColumnsToggle,
|
|
99
|
+
DataTablePagination,
|
|
100
|
+
type DataTableExtendedColumnProps,
|
|
101
|
+
} from "mantine-datatable-extended";
|
|
102
|
+
import { useDataTableColumns } from "mantine-datatable";
|
|
103
|
+
import { Group, Space } from "@mantine/core";
|
|
104
|
+
|
|
105
|
+
const columns: DataTableExtendedColumnProps[] = [
|
|
106
|
+
{
|
|
107
|
+
accessor: "name",
|
|
108
|
+
title: "Name",
|
|
109
|
+
extend: {
|
|
110
|
+
searchable: true,
|
|
111
|
+
sortable: true,
|
|
112
|
+
filterable: true,
|
|
113
|
+
filterVariant: "text",
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
// ... more columns
|
|
117
|
+
];
|
|
118
|
+
|
|
119
|
+
export default function MyTable() {
|
|
120
|
+
const originalUseDataTableColumnsResult = useDataTableColumns({
|
|
121
|
+
key: "my-table",
|
|
122
|
+
columns,
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
return (
|
|
126
|
+
<DataTableProvider
|
|
127
|
+
columns={columns}
|
|
128
|
+
originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
|
|
129
|
+
storeColumnsKey="my-table"
|
|
130
|
+
>
|
|
131
|
+
<Group justify="space-between">
|
|
132
|
+
<Group>
|
|
133
|
+
<DataTableSearch />
|
|
134
|
+
<DataTableFilter />
|
|
135
|
+
</Group>
|
|
136
|
+
<Group>
|
|
137
|
+
<DataTableSortList />
|
|
138
|
+
<DataTableColumnsToggle />
|
|
139
|
+
</Group>
|
|
140
|
+
</Group>
|
|
141
|
+
|
|
142
|
+
<Space h="md" />
|
|
143
|
+
<DataTableExtended records={data} />
|
|
144
|
+
<Space h="md" />
|
|
145
|
+
<DataTablePagination />
|
|
146
|
+
</DataTableProvider>
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Documentation
|
|
152
|
+
|
|
153
|
+
For detailed documentation, examples, and API reference, please visit the [documentation website](https://your-docs-url.com).
|
|
154
|
+
|
|
155
|
+
## Important Note
|
|
156
|
+
|
|
157
|
+
This is an opinionated library built with many personal opinions to reduce customization time and achieve immediate results. Use it if you really need these features.
|
|
158
|
+
|
|
159
|
+
You can still use this library alongside the original Mantine DataTable without any conflicts.
|
|
160
|
+
|
|
161
|
+
## License
|
|
162
|
+
|
|
163
|
+
MIT
|
|
164
|
+
|
|
165
|
+
## Contributing
|
|
166
|
+
|
|
167
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import { DataTableColumn, useDataTableColumns } from 'mantine-datatable';
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
|
|
4
|
+
type FilterMultiSelectOptions = {
|
|
5
|
+
data: {
|
|
6
|
+
value: string;
|
|
7
|
+
label: string;
|
|
8
|
+
count?: number;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
}[];
|
|
11
|
+
};
|
|
12
|
+
type FilterSingleSelectOptions = {
|
|
13
|
+
data: {
|
|
14
|
+
value: string;
|
|
15
|
+
label: string;
|
|
16
|
+
count?: number;
|
|
17
|
+
icon?: React.ReactNode;
|
|
18
|
+
}[];
|
|
19
|
+
};
|
|
20
|
+
type FilterNumberRangeOptions = {
|
|
21
|
+
min: number;
|
|
22
|
+
max: number;
|
|
23
|
+
step?: number;
|
|
24
|
+
minRange?: number;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type BaseExtend = {
|
|
28
|
+
/**
|
|
29
|
+
* Whether the column is searchable.
|
|
30
|
+
*/
|
|
31
|
+
searchable?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the column is sortable.
|
|
34
|
+
*/
|
|
35
|
+
sortable?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Whether the column is filterable.
|
|
38
|
+
*/
|
|
39
|
+
filterable?: boolean;
|
|
40
|
+
};
|
|
41
|
+
type FilterableExtend = BaseExtend & ({
|
|
42
|
+
filterVariant?: "text" | "number" | "date" | "date_range";
|
|
43
|
+
filterOptions?: never;
|
|
44
|
+
} | {
|
|
45
|
+
filterVariant: "number_range";
|
|
46
|
+
filterOptions: FilterNumberRangeOptions;
|
|
47
|
+
} | {
|
|
48
|
+
filterVariant: "single_select";
|
|
49
|
+
filterOptions: FilterSingleSelectOptions;
|
|
50
|
+
} | {
|
|
51
|
+
filterVariant: "multi_select";
|
|
52
|
+
filterOptions: FilterMultiSelectOptions;
|
|
53
|
+
});
|
|
54
|
+
type DataTableExtendedColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, "sortable" | "sortKey" | "filter" | "filterPopoverProps" | "filterPopoverDisableClickOutside" | "filtering" | "ellipsis" | "noWrap"> & {
|
|
55
|
+
/**
|
|
56
|
+
* The extended properties of the column.
|
|
57
|
+
*/
|
|
58
|
+
extend?: FilterableExtend;
|
|
59
|
+
} & ({
|
|
60
|
+
/**
|
|
61
|
+
* If true, cell content in this column will be truncated with ellipsis as needed and will not wrap
|
|
62
|
+
* to multiple lines (i.e. `overflow: hidden; text-overflow: ellipsis`; `white-space: nowrap`).
|
|
63
|
+
* On a column, you can either set this property or `noWrap`, but not both.
|
|
64
|
+
*/
|
|
65
|
+
ellipsis?: boolean;
|
|
66
|
+
noWrap?: never;
|
|
67
|
+
} | {
|
|
68
|
+
ellipsis?: never;
|
|
69
|
+
/**
|
|
70
|
+
* If true, cell content in this column will not wrap to multiple lines (i.e. `white-space: nowrap`).
|
|
71
|
+
* This is useful for columns containing long strings.
|
|
72
|
+
* On a column, you can either set this property or `ellipsis`, but not both.
|
|
73
|
+
*/
|
|
74
|
+
noWrap?: boolean;
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
declare const sortSchema: z.ZodObject<{
|
|
78
|
+
accessor: z.ZodString;
|
|
79
|
+
direction: z.ZodEnum<{
|
|
80
|
+
readonly ASC: "asc";
|
|
81
|
+
readonly DESC: "desc";
|
|
82
|
+
}>;
|
|
83
|
+
}, z.core.$strip>;
|
|
84
|
+
type TSortCondition = z.infer<typeof sortSchema>;
|
|
85
|
+
declare const searchSchema: z.ZodObject<{
|
|
86
|
+
accessors: z.ZodArray<z.ZodString>;
|
|
87
|
+
value: z.ZodString;
|
|
88
|
+
}, z.core.$strip>;
|
|
89
|
+
type TSearchCondition = z.infer<typeof searchSchema>;
|
|
90
|
+
declare const filterSchema: z.ZodObject<{
|
|
91
|
+
variant: z.ZodEnum<{
|
|
92
|
+
readonly TEXT: "text";
|
|
93
|
+
readonly NUMBER: "number";
|
|
94
|
+
readonly NUMBER_RANGE: "number_range";
|
|
95
|
+
readonly DATE: "date";
|
|
96
|
+
readonly DATE_RANGE: "date_range";
|
|
97
|
+
readonly SINGLE_SELECT: "single_select";
|
|
98
|
+
readonly MULTI_SELECT: "multi_select";
|
|
99
|
+
}>;
|
|
100
|
+
accessor: z.ZodString;
|
|
101
|
+
value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
|
|
102
|
+
}, z.core.$strip>;
|
|
103
|
+
type TFilterCondition = z.infer<typeof filterSchema>;
|
|
104
|
+
|
|
105
|
+
type UrlKeysType = {
|
|
106
|
+
/**
|
|
107
|
+
* The key of the page parameter.
|
|
108
|
+
*/
|
|
109
|
+
page: string;
|
|
110
|
+
/**
|
|
111
|
+
* The key of the page size parameter.
|
|
112
|
+
*/
|
|
113
|
+
pageSize: string;
|
|
114
|
+
/**
|
|
115
|
+
* The key of the sorts parameter.
|
|
116
|
+
*/
|
|
117
|
+
sorts: string;
|
|
118
|
+
/**
|
|
119
|
+
* The key of the search parameter.
|
|
120
|
+
*/
|
|
121
|
+
search: string;
|
|
122
|
+
/**
|
|
123
|
+
* The key of the filters parameter.
|
|
124
|
+
*/
|
|
125
|
+
filters: string;
|
|
126
|
+
};
|
|
127
|
+
type DefaultParamsType = {
|
|
128
|
+
/**
|
|
129
|
+
* The default page number.
|
|
130
|
+
*/
|
|
131
|
+
page?: number;
|
|
132
|
+
/**
|
|
133
|
+
* The default page size.
|
|
134
|
+
*/
|
|
135
|
+
pageSize?: number;
|
|
136
|
+
/**
|
|
137
|
+
* The default sorts.
|
|
138
|
+
*/
|
|
139
|
+
sorts?: TSortCondition[];
|
|
140
|
+
/**
|
|
141
|
+
* The default search.
|
|
142
|
+
*/
|
|
143
|
+
search?: TSearchCondition;
|
|
144
|
+
/**
|
|
145
|
+
* The default filters.
|
|
146
|
+
*/
|
|
147
|
+
filters?: TFilterCondition[];
|
|
148
|
+
};
|
|
149
|
+
type PaginationPropsType = {
|
|
150
|
+
/**
|
|
151
|
+
* The total records.
|
|
152
|
+
*/
|
|
153
|
+
totalRecords: number;
|
|
154
|
+
/**
|
|
155
|
+
* The records per page options.
|
|
156
|
+
*/
|
|
157
|
+
recordsPerPageOptions: number[];
|
|
158
|
+
};
|
|
159
|
+
type DataTableContextProps<T = Record<string, unknown>> = {
|
|
160
|
+
/**
|
|
161
|
+
* The keys of the URL parameters.
|
|
162
|
+
* Useful for multiple data tables on the same page.
|
|
163
|
+
*/
|
|
164
|
+
urlKeys?: UrlKeysType;
|
|
165
|
+
/**
|
|
166
|
+
* The default parameters of the data table.
|
|
167
|
+
*/
|
|
168
|
+
defaultParams?: DefaultParamsType;
|
|
169
|
+
/**
|
|
170
|
+
* The key of the column store.
|
|
171
|
+
* This is used to store the columns of the data table in localStorage for draggable and toggleable columns.
|
|
172
|
+
* Event if you don't want to use the draggable and toggleable columns, you should set this key.
|
|
173
|
+
*/
|
|
174
|
+
storeColumnsKey: string;
|
|
175
|
+
/**
|
|
176
|
+
* The columns of the data table.
|
|
177
|
+
* This is use original column properties from mantine-datatable with "extend" property.
|
|
178
|
+
*/
|
|
179
|
+
columns: DataTableExtendedColumnProps<T>[];
|
|
180
|
+
/**
|
|
181
|
+
* The result of the useDataTableColumns hook from mantine-datatable.
|
|
182
|
+
*/
|
|
183
|
+
originalUseDataTableColumnsResult: ReturnType<typeof useDataTableColumns<T>>;
|
|
184
|
+
/**
|
|
185
|
+
* The pagination props.
|
|
186
|
+
*/
|
|
187
|
+
paginationProps?: PaginationPropsType;
|
|
188
|
+
/**
|
|
189
|
+
* The function to set the pagination total records.
|
|
190
|
+
*/
|
|
191
|
+
setTotalRecords?: (totalRecords: number) => void;
|
|
192
|
+
/**
|
|
193
|
+
* The function to set the pagination records per page options.
|
|
194
|
+
*/
|
|
195
|
+
setRecordsPerPageOptions?: (recordsPerPageOptions: number[]) => void;
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
export type { DataTableContextProps as D, DataTableExtendedColumnProps as a };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,145 +1,100 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import { DataTableColumn, useDataTableColumns } from 'mantine-datatable';
|
|
4
|
-
import { T as TSortCondition, E as ExtendedDataTableProps, a as TSearchCondition, b as TFilterCondition } from './data-table-extend.type-Dh8nSBAW.js';
|
|
5
|
-
export { f as filterSchema, s as searchSchema, c as sortSchema } from './data-table-extend.type-Dh8nSBAW.js';
|
|
2
|
+
import { DataTableProps, DataTablePaginationProps, DataTableSortProps } from 'mantine-datatable';
|
|
6
3
|
import * as nuqs from 'nuqs';
|
|
4
|
+
import { D as DataTableContextProps } from './data-table-provider.type-CblXE_l1.js';
|
|
5
|
+
export { a as DataTableExtendedColumnProps } from './data-table-provider.type-CblXE_l1.js';
|
|
7
6
|
import 'zod';
|
|
8
7
|
|
|
9
|
-
declare const ESortDirection: {
|
|
10
|
-
readonly ASC: "asc";
|
|
11
|
-
readonly DESC: "desc";
|
|
12
|
-
};
|
|
13
|
-
type ESortDirection = (typeof ESortDirection)[keyof typeof ESortDirection];
|
|
14
|
-
declare const EFilterVariant: {
|
|
15
|
-
readonly TEXT: "text";
|
|
16
|
-
readonly NUMBER: "number";
|
|
17
|
-
readonly NUMBER_RANGE: "number_range";
|
|
18
|
-
readonly DATE: "date";
|
|
19
|
-
readonly DATE_RANGE: "date_range";
|
|
20
|
-
readonly SINGLE_SELECT: "single_select";
|
|
21
|
-
readonly MULTI_SELECT: "multi_select";
|
|
22
|
-
};
|
|
23
|
-
type EFilterVariant = (typeof EFilterVariant)[keyof typeof EFilterVariant];
|
|
24
|
-
|
|
25
|
-
type ExtendedDataTableColumnProps<T = Record<string, unknown>> = DataTableColumn<T> & {
|
|
26
|
-
extend?: {
|
|
27
|
-
searchable?: boolean;
|
|
28
|
-
sortable?: boolean;
|
|
29
|
-
filterable?: boolean;
|
|
30
|
-
filterVariant?: EFilterVariant;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
|
|
34
8
|
type i18nDataTableViewOptions = {
|
|
9
|
+
/**
|
|
10
|
+
* The label for the columns toggle button.
|
|
11
|
+
*/
|
|
35
12
|
columnsToggle: string;
|
|
36
13
|
};
|
|
37
14
|
type i18nDataTableSortOptions = {
|
|
15
|
+
/**
|
|
16
|
+
* The label for the sort button.
|
|
17
|
+
*/
|
|
38
18
|
sort: string;
|
|
19
|
+
/**
|
|
20
|
+
* The label for the add sort button.
|
|
21
|
+
*/
|
|
39
22
|
addSort: string;
|
|
23
|
+
/**
|
|
24
|
+
* The label for the reset sort button.
|
|
25
|
+
*/
|
|
40
26
|
resetSort: string;
|
|
27
|
+
/**
|
|
28
|
+
* The label for the ascending sort direction.
|
|
29
|
+
*/
|
|
41
30
|
asc: string;
|
|
31
|
+
/**
|
|
32
|
+
* The label for the descending sort direction.
|
|
33
|
+
*/
|
|
42
34
|
desc: string;
|
|
43
35
|
};
|
|
44
36
|
type i18nDataTableSearchOptions = {
|
|
37
|
+
/**
|
|
38
|
+
* The label for the search input placeholder.
|
|
39
|
+
*/
|
|
45
40
|
search: string;
|
|
46
41
|
};
|
|
47
42
|
type i18nDataTableFilterOptions = {
|
|
43
|
+
/**
|
|
44
|
+
* The label for the reset filter button.
|
|
45
|
+
*/
|
|
48
46
|
resetFilter: string;
|
|
49
47
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
type i18nDataTablePaginationOptions = {
|
|
49
|
+
/**
|
|
50
|
+
* The label for the rows per page.
|
|
51
|
+
*/
|
|
52
|
+
rowsPerPage: string;
|
|
53
|
+
/**
|
|
54
|
+
* The label for the page of total pages.
|
|
55
|
+
* The first string is "Page".
|
|
56
|
+
* The second string is "of".
|
|
57
|
+
*/
|
|
58
|
+
pageOfTotalPages: [string, string];
|
|
59
|
+
/**
|
|
60
|
+
* The label for the start record - end record / total records.
|
|
61
|
+
* The first string is "From".
|
|
62
|
+
* The second string is "to".
|
|
63
|
+
* The third string is "of total".
|
|
64
|
+
*/
|
|
65
|
+
startEndRecordOfTotalRecords: [string, string, string];
|
|
55
66
|
};
|
|
56
|
-
declare function DataTableColumnsToggle<T = Record<string, unknown>>({ columnStoreKey, columns, i18n, }: TDataTableColumnsToggleProps<T>): react_jsx_runtime.JSX.Element;
|
|
57
67
|
|
|
58
|
-
type
|
|
59
|
-
|
|
60
|
-
data: {
|
|
61
|
-
value: string;
|
|
62
|
-
label: string;
|
|
63
|
-
}[];
|
|
68
|
+
type TDataTableColumnsToggleProps = {
|
|
69
|
+
i18n?: i18nDataTableViewOptions;
|
|
64
70
|
};
|
|
71
|
+
declare function DataTableColumnsToggle({ i18n, }: TDataTableColumnsToggleProps): react_jsx_runtime.JSX.Element;
|
|
65
72
|
|
|
66
|
-
type
|
|
67
|
-
|
|
68
|
-
debounceTimeout?: number;
|
|
69
|
-
};
|
|
73
|
+
type TDataTableExtendedProps<T = Record<string, unknown>> = Omit<DataTableProps<T>, "storeColumnsKey" | "groups" | "columns" | keyof DataTablePaginationProps | keyof DataTableSortProps>;
|
|
74
|
+
declare function DataTableExtended<T = Record<string, unknown>>(props: TDataTableExtendedProps<T>): react_jsx_runtime.JSX.Element;
|
|
70
75
|
|
|
71
|
-
type
|
|
72
|
-
|
|
73
|
-
min: number;
|
|
74
|
-
max: number;
|
|
75
|
-
step?: number;
|
|
76
|
-
minRange?: number;
|
|
77
|
-
debounceTimeout?: number;
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
type TDataTableFilterTextOptions<T = Record<string, unknown>> = {
|
|
81
|
-
accessor: keyof T | (string & NonNullable<unknown>);
|
|
82
|
-
debounceTimeout?: number;
|
|
76
|
+
type TDataTableFilterProps = {
|
|
77
|
+
i18n?: i18nDataTableFilterOptions;
|
|
83
78
|
};
|
|
79
|
+
declare function DataTableFilter({ i18n }: TDataTableFilterProps): react_jsx_runtime.JSX.Element;
|
|
84
80
|
|
|
85
|
-
type
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
facets?: TDataTableFilterMultiSelectFacet<T>[];
|
|
89
|
-
numberRangeOptions?: TDataTableFilterNumberRangeOptions<T>[];
|
|
90
|
-
textOptions?: TDataTableFilterTextOptions<T>[];
|
|
91
|
-
numberOptions?: TDataTableFilterNumberOptions<T>[];
|
|
92
|
-
i18n?: i18nDataTableFilterOptions;
|
|
81
|
+
type TDataTablePaginationProps = {
|
|
82
|
+
recordsPerPageOptions?: number[];
|
|
83
|
+
i18n?: i18nDataTablePaginationOptions;
|
|
93
84
|
};
|
|
94
|
-
declare function
|
|
85
|
+
declare function DataTablePagination({ recordsPerPageOptions, i18n, }: TDataTablePaginationProps): false | react_jsx_runtime.JSX.Element;
|
|
95
86
|
|
|
96
|
-
type TDataTableSearchProps
|
|
97
|
-
prefixQueryKey?: string;
|
|
98
|
-
columns: ExtendedDataTableColumnProps<T>[];
|
|
87
|
+
type TDataTableSearchProps = {
|
|
99
88
|
i18n?: i18nDataTableSearchOptions;
|
|
100
|
-
debounceTimeout?: number;
|
|
101
89
|
};
|
|
102
|
-
declare function DataTableSearch
|
|
90
|
+
declare function DataTableSearch({ i18n }: TDataTableSearchProps): react_jsx_runtime.JSX.Element;
|
|
103
91
|
|
|
104
|
-
type TDataTableSortListProps
|
|
105
|
-
prefixQueryKey?: string;
|
|
106
|
-
columns: ExtendedDataTableColumnProps<T>[];
|
|
92
|
+
type TDataTableSortListProps = {
|
|
107
93
|
i18n?: i18nDataTableSortOptions;
|
|
108
|
-
defaultSorts?: TSortCondition[];
|
|
109
|
-
};
|
|
110
|
-
declare function DataTableSortList<T = Record<string, unknown>>({ prefixQueryKey, columns, i18n, defaultSorts, }: TDataTableSortListProps<T>): react_jsx_runtime.JSX.Element;
|
|
111
|
-
|
|
112
|
-
type OriginalDataTableColumn<T = Record<string, unknown>> = Parameters<typeof useDataTableColumns<T>>[0];
|
|
113
|
-
type TUseDataTableColumnsExtendProps<T = Record<string, unknown>> = Omit<OriginalDataTableColumn<T>, "columns"> & {
|
|
114
|
-
columns: ExtendedDataTableColumnProps<T>[];
|
|
115
|
-
};
|
|
116
|
-
declare function useDataTableColumnsExtend<T = Record<string, unknown>>({ key, columns, getInitialValueInEffect, headerRef, scrollViewportRef, onFixedLayoutChange, }: TUseDataTableColumnsExtendProps<T>): {
|
|
117
|
-
effectiveColumns: ExtendedDataTableColumnProps<T>[];
|
|
118
|
-
setColumnsOrder: (order: string[] | ((prev: string[]) => string[])) => void;
|
|
119
|
-
columnsOrder: string[];
|
|
120
|
-
resetColumnsOrder: () => void;
|
|
121
|
-
columnsToggle: mantine_datatable.DataTableColumnToggle[];
|
|
122
|
-
setColumnsToggle: (toggle: mantine_datatable.DataTableColumnToggle[] | ((prev: mantine_datatable.DataTableColumnToggle[]) => mantine_datatable.DataTableColumnToggle[])) => void;
|
|
123
|
-
resetColumnsToggle: () => void;
|
|
124
|
-
columnsWidth: {
|
|
125
|
-
[x: string]: string | number;
|
|
126
|
-
}[];
|
|
127
|
-
setColumnsWidth: (updates: {
|
|
128
|
-
accessor: string;
|
|
129
|
-
width: string | number;
|
|
130
|
-
}[]) => void;
|
|
131
|
-
setColumnWidth: (accessor: string, width: string | number) => void;
|
|
132
|
-
setMultipleColumnWidths: (updates: {
|
|
133
|
-
accessor: string;
|
|
134
|
-
width: string | number;
|
|
135
|
-
}[]) => void;
|
|
136
|
-
resetColumnsWidth: () => void;
|
|
137
|
-
hasResizableColumns: boolean;
|
|
138
|
-
allResizableWidthsInitial: boolean;
|
|
139
|
-
measureAndSetColumnWidths: () => void;
|
|
140
94
|
};
|
|
95
|
+
declare function DataTableSortList({ i18n, }: TDataTableSortListProps): react_jsx_runtime.JSX.Element;
|
|
141
96
|
|
|
142
|
-
declare function useDataTableQueryParams(
|
|
97
|
+
declare function useDataTableQueryParams(): {
|
|
143
98
|
page: number;
|
|
144
99
|
setPage: (value: number | ((old: number) => number | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
|
|
145
100
|
pageSize: number;
|
|
@@ -173,33 +128,35 @@ declare function useDataTableQueryParams(props?: ExtendedDataTableProps): {
|
|
|
173
128
|
value: string;
|
|
174
129
|
} | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
|
|
175
130
|
filters: {
|
|
176
|
-
variant: "number" | "text" | "
|
|
131
|
+
variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
|
|
177
132
|
accessor: string;
|
|
178
133
|
value: string | string[];
|
|
179
134
|
}[];
|
|
180
135
|
setFilters: (value: {
|
|
181
|
-
variant: "number" | "text" | "
|
|
136
|
+
variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
|
|
182
137
|
accessor: string;
|
|
183
138
|
value: string | string[];
|
|
184
139
|
}[] | ((old: {
|
|
185
|
-
variant: "number" | "text" | "
|
|
140
|
+
variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
|
|
186
141
|
accessor: string;
|
|
187
142
|
value: string | string[];
|
|
188
143
|
}[]) => {
|
|
189
|
-
variant: "number" | "text" | "
|
|
144
|
+
variant: "number" | "text" | "date" | "date_range" | "number_range" | "single_select" | "multi_select";
|
|
190
145
|
accessor: string;
|
|
191
146
|
value: string | string[];
|
|
192
147
|
}[] | null) | null, options?: nuqs.Options) => Promise<URLSearchParams>;
|
|
148
|
+
resetPage: () => void;
|
|
149
|
+
resetPageSize: () => void;
|
|
150
|
+
resetSorts: () => void;
|
|
151
|
+
resetSearch: () => void;
|
|
152
|
+
resetFilters: () => void;
|
|
153
|
+
resetAll: () => void;
|
|
193
154
|
};
|
|
194
155
|
|
|
195
|
-
declare
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
sorts: TSortCondition[];
|
|
201
|
-
search: TSearchCondition;
|
|
202
|
-
filters: TFilterCondition[];
|
|
203
|
-
};
|
|
156
|
+
declare function useDataTableContext<T = Record<string, unknown>>(): DataTableContextProps<T>;
|
|
157
|
+
type DataTableProviderProps<T = Record<string, unknown>> = {
|
|
158
|
+
children: React.ReactNode;
|
|
159
|
+
} & DataTableContextProps<T>;
|
|
160
|
+
declare function DataTableProvider<T = Record<string, unknown>>({ children, urlKeys, defaultParams, storeColumnsKey, columns, originalUseDataTableColumnsResult, }: DataTableProviderProps<T>): react_jsx_runtime.JSX.Element;
|
|
204
161
|
|
|
205
|
-
export { DataTableColumnsToggle,
|
|
162
|
+
export { DataTableColumnsToggle, DataTableContextProps, DataTableExtended, DataTableFilter, DataTablePagination, DataTableProvider, DataTableSearch, DataTableSortList, useDataTableContext, useDataTableQueryParams };
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {Popover,Button,Stack,Checkbox,Group,TextInput,CloseButton,Badge,Grid,Select,ActionIcon,Space,Indicator,RangeSlider,NumberInput}from'@mantine/core';import {IconColumns,IconSort09,IconTrash,IconPlus,IconRefresh,IconX,IconSearch}from'@tabler/icons-react';import {useDataTableColumns}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import me,{z}from'zod';import {jsxs,jsx}from'react/jsx-runtime';import {DatePicker}from'@mantine/dates';import G from'dayjs';import Ut,{useState,useRef,useEffect}from'react';import {useDebouncedCallback}from'@mantine/hooks';function _({key:s,columns:r,getInitialValueInEffect:u=true,headerRef:n,scrollViewportRef:c,onFixedLayoutChange:m}){let o=useDataTableColumns({key:s,columns:r,getInitialValueInEffect:u,headerRef:n,scrollViewportRef:c,onFixedLayoutChange:m});return {...o,effectiveColumns:o.effectiveColumns}}var k={ASC:"asc",DESC:"desc"},y={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var L=z.object({accessor:z.string(),direction:z.enum(k)}),K=z.object({accessors:z.array(z.string()),value:z.string()}),X=z.object({variant:z.enum(y),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});var x=(s,r)=>r?`${r}_${s}`:s,eo=s=>s.accessors.length<=0||s.value.length<=0?{accessors:[],value:""}:s,to=(s,r)=>({page:s[x("page",r)],pageSize:s[x("pageSize",r)],sorts:s[x("sorts",r)],search:s[x("search",r)],filters:s[x("filters",r)]});function f(s={}){let{prefixQueryKey:r,defaultSorts:u}=s,[n,c]=useQueryState(x("page",r),parseAsInteger.withDefault(1)),[m,o]=useQueryState(x("pageSize",r),parseAsInteger.withDefault(10)),[t,p]=useQueryState(x("sorts",r),parseAsJson(me.array(L)).withDefault(u??[])),[g,b]=useQueryState(x("search",r),parseAsJson(K).withDefault({accessors:[],value:""})),[d,T]=useQueryState(x("filters",r),parseAsJson(me.array(X)).withDefault([]));return {page:n,setPage:c,pageSize:m,setPageSize:o,sorts:t,setSorts:p,search:g,setSearch:b,filters:d,setFilters:T}}var Ge={columnsToggle:"Columns Toggle"};function ze({columnStoreKey:s,columns:r,i18n:u=Ge}){let{effectiveColumns:n,columnsToggle:c,setColumnsToggle:m}=_({key:s,columns:r}),o=t=>{m(c.map(p=>p.accessor===t.accessor?{...p,toggled:!p.toggled}:p));};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"target",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconColumns,{}),variant:"default",children:u.columnsToggle})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:c.filter(t=>t.toggleable).map(t=>jsx(Checkbox,{checked:t.toggled,label:n.find(p=>p.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>o(t),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor))})})]})}function ge({prefixQueryKey:s,column:r}){let u=r.accessor,n=r.extend?.filterVariant,{filters:c,setFilters:m}=f({prefixQueryKey:s}),o=c.find(T=>T.accessor===u),t=o?.value?1:0,[p,g]=useState(o?G(Number.parseInt(o.value,10)).toISOString():null),b=T=>{if(g(T),T){let i=G(T).valueOf().toString();m(o?c.map(l=>l.accessor===u?{...l,value:i}:l):[...c,{variant:n,accessor:u,value:i}]);}},d=()=>{g(null),m(c.filter(T=>T.accessor!==u));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:d,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{onChange:b,value:p})})]})}function fe({prefixQueryKey:s,column:r}){let u=r.accessor,n=r.extend?.filterVariant,{filters:c,setFilters:m}=f({prefixQueryKey:s}),o=c.find(T=>T.accessor===u),t=o?.value.length??0,[p,g]=useState(o?.value[0]&&o?.value[1]?[G(Number.parseInt(o.value[0],10)).toISOString(),G(Number.parseInt(o.value[1],10)).toISOString()]:[null,null]),b=([T,i])=>{if(g([T,i]),T&&i){let[l,e]=[G(T).valueOf().toString(),G(i).valueOf().toString()];m(o?c.map(a=>a.accessor===u?{...a,value:[l,e]}:a):[...c,{variant:n,accessor:u,value:[l,e]}]);}},d=()=>{g([null,null]),m(c.filter(T=>T.accessor!==u));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:d,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,onChange:b,type:"range",value:p})})]})}function Se({prefixQueryKey:s,column:r,facet:u}){let n=r.accessor,c=r.extend?.filterVariant,m=u.data,{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(i=>i.accessor===n),g=p?.value.length??0,b=i=>{let l=p?.value??[],e=l.includes(i)?l.filter(a=>a!==i):[...l,i];if(e.length===0)t(o.filter(a=>a.accessor!==n));else {let a=o.some(h=>h.accessor===n);t(a?o.map(h=>h.accessor===n?{...h,value:e}:h):[...o,{variant:c,accessor:n,value:e}]);}},d=i=>o.some(l=>l.accessor===n&&l.value.includes(i)),T=()=>{t(o.filter(i=>i.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:T,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(i=>jsx(Checkbox,{checked:d(i.value),label:i.label,labelPosition:"left",onChange:()=>b(i.value),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${n}-${i.value}`))})})]})}function ye({prefixQueryKey:s,column:r,numberOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{debounceTimeout:m=300}=u??{debounceTimeout:300},{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(e=>e.accessor===n),g=p?.value.length??0,[b,d]=useState(p?Number.parseInt(p.value,10):void 0),T=useDebouncedCallback(e=>{t(p?o.map(a=>a.accessor===n?{...a,value:e.toString()}:a):[...o,{variant:c,accessor:n,value:e.toString()}]);},m),i=e=>{let a=e;typeof e=="string"&&(a=Number.parseInt(e,10)),d(a),T(a);},l=()=>{d(void 0),t(o.filter(e=>e.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(NumberInput,{onChange:e=>i(e),value:b})})]})}function ve({prefixQueryKey:s,column:r,numberRangeOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{min:m,max:o,step:t=1,minRange:p=1,debounceTimeout:g=300}=u,{filters:b,setFilters:d}=f({prefixQueryKey:s}),T=b.find(C=>C.accessor===n),i=T?.value.length??0,[l,e]=useState(T?.value[0]&&T?.value[1]?[Number.parseInt(T.value[0],10),Number.parseInt(T.value[1],10)]:[m,o]),a=useDebouncedCallback(C=>{let[V,ue]=[C[0].toString(),C[1].toString()];d(T?b.map(M=>M.accessor===n?{...M,value:[V,ue]}:M):[...b,{variant:c,accessor:n,value:[V,ue]}]);},g),h=([C,V])=>{e([C,V]),C&&V&&a([C,V]);},Ie=()=>{e([m,o]),d(b.filter(C=>C.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:i<=0,processing:true,children:jsxs(Button.Group,{children:[i>0&&jsx(Button,{onClick:Ie,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(RangeSlider,{max:o,min:m,minRange:p,onChange:h,step:t,value:l})})]})}function Fe({prefixQueryKey:s,column:r,facet:u}){let n=r.accessor,c=r.extend?.filterVariant,m=u.data,{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(i=>i.accessor===n),g=p?.value.length??0,b=i=>{t(p?o.map(l=>l.accessor===n?{...l,value:i}:l):[...o,{variant:c,accessor:n,value:i}]);},d=i=>p?.value===i,T=()=>{t(o.filter(i=>i.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:T,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(i=>jsx(Checkbox,{checked:d(i.value),label:i.label,labelPosition:"left",onChange:()=>b(i.value),radius:"xl",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${n}-${i.value}`))})})]})}function Pe({prefixQueryKey:s,column:r,textOptions:u}){let n=r.accessor,c=r.extend?.filterVariant,{debounceTimeout:m=300}=u??{debounceTimeout:300},{filters:o,setFilters:t}=f({prefixQueryKey:s}),p=o.find(e=>e.accessor===n),g=p?.value.length??0,[b,d]=useState(p?p.value:""),T=useDebouncedCallback(e=>{t(p?e===""?o.filter(a=>a.accessor!==n):o.map(a=>a.accessor===n?{...a,value:e}:a):[...o,{variant:c,accessor:n,value:e}]);},m),i=e=>{d(e),T(e);},l=()=>{d(""),t(o.filter(e=>e.accessor!==n));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:g<=0,processing:true,children:jsxs(Button.Group,{children:[g>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:r.title})]})})}),jsx(Popover.Dropdown,{children:jsx(TextInput,{onChange:e=>i(e.target.value),value:b})})]})}var St={resetFilter:"Reset Filter"};function ht({prefixQueryKey:s,columns:r,facets:u,numberRangeOptions:n,textOptions:c,numberOptions:m,i18n:o=St}){let{filters:t,setFilters:p}=f({prefixQueryKey:s}),g=()=>{p([]);},b=r.filter(e=>e.extend?.filterable),d=e=>u?.find(a=>a.accessor===e),T=e=>n?.find(a=>a.accessor===e),i=e=>c?.find(a=>a.accessor===e),l=e=>m?.find(a=>a.accessor===e);return jsxs(Group,{gap:"xs",children:[b.map(e=>{switch(e.extend?.filterVariant){case y.TEXT:{let a=i(e.accessor);return jsx(Pe,{column:e,prefixQueryKey:s,textOptions:a},e.accessor)}case y.NUMBER:{let a=l(e.accessor);return jsx(ye,{column:e,numberOptions:a,prefixQueryKey:s},e.accessor)}case y.SINGLE_SELECT:{let a=d(e.accessor);return a&&jsx(Fe,{column:e,facet:a,prefixQueryKey:s},e.accessor)}case y.MULTI_SELECT:{let a=d(e.accessor);return a&&jsx(Se,{column:e,facet:a,prefixQueryKey:s},e.accessor)}case y.DATE:return jsx(ge,{column:e,prefixQueryKey:s},e.accessor);case y.DATE_RANGE:return jsx(fe,{column:e,prefixQueryKey:s},e.accessor);case y.NUMBER_RANGE:{let a=T(e.accessor);return a&&jsx(ve,{column:e,numberRangeOptions:a,prefixQueryKey:s},e.accessor)}default:return null}}),t.length>0&&jsx(Button,{onClick:g,variant:"default",children:o.resetFilter})]})}function Vt({prefixQueryKey:s,columns:r}){let{search:u,setSearch:n}=f({prefixQueryKey:s}),c=u.accessors.length,m=r.filter(t=>t.extend?.searchable),o=t=>{u.accessors.includes(t)?n({...u,accessors:u.accessors.filter(p=>p!==t)}):n({...u,accessors:[...u.accessors,t]});};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:c<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:c}),children:jsx(ActionIcon,{size:"lg",variant:"default",children:jsx(IconSearch,{size:16})})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:m.map(t=>jsx(Checkbox,{checked:u.accessors.includes(t.accessor.toString()),label:t.title?.toString()??"",labelPosition:"left",onChange:()=>o(t.accessor.toString()),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor.toString()))})})]})}var Bt={search:"Search"};function At({prefixQueryKey:s,columns:r,i18n:u=Bt,debounceTimeout:n=300}){let[c,m]=useState(""),o=useRef("");o.current=c,useEffect(()=>{},[]);let{search:t,setSearch:p}=f({prefixQueryKey:s});useEffect(()=>{o.current!==t.value&&m(t.value);},[t.value]);let g=useDebouncedCallback(d=>p({...t,value:d}),n),b=d=>{m(d),g(d);};return jsxs(Group,{gap:"xs",children:[jsx(Vt,{columns:r,prefixQueryKey:s}),jsx(TextInput,{onChange:d=>b(d.target.value),placeholder:u.search,rightSection:c.length>0&&jsx(CloseButton,{onClick:()=>b(""),size:"sm",variant:"transparent"}),value:c,w:"200px"})]})}var $t={sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"};function Wt({prefixQueryKey:s,columns:r,i18n:u=$t,defaultSorts:n=[]}){let{sorts:c,setSorts:m}=f({prefixQueryKey:s,defaultSorts:n}),o=r.filter(l=>l.extend?.sortable),t=o.filter(l=>!c.some(e=>e.accessor===l.accessor)),p=c.length,g=()=>{if(t.length>0&&t[0]){let l={accessor:t[0].accessor,direction:k.ASC};m([...c,l]);}},b=()=>{m(n);},d=l=>{m(c.filter(e=>e.accessor!==l));},T=(l,e)=>{if(e===null)return;let a=c.filter(h=>h.accessor!==l&&h.accessor!==e);m([...a,{accessor:e,direction:c.find(h=>h.accessor===l)?.direction||k.ASC}]);},i=(l,e)=>{e!==null&&m(c.map(a=>a.accessor===l?{...a,direction:e}:a));};return jsxs(Popover,{position:"bottom-end",shadow:"md",width:"450",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconSort09,{}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:p}),variant:"default",children:u.sort})}),jsxs(Popover.Dropdown,{children:[jsx(Grid,{children:c.map(l=>jsxs(Ut.Fragment,{children:[jsx(Grid.Col,{span:6,children:jsx(Select,{comboboxProps:{withinPortal:false},data:o.map(e=>({label:e.title?.toString()??"",value:e.accessor})),onChange:e=>T(l.accessor,e),value:l.accessor})}),jsx(Grid.Col,{span:4,children:jsx(Select,{comboboxProps:{withinPortal:false},data:Object.values(k).map(e=>({label:u[e]??"",value:e})),onChange:e=>i(l.accessor,e),value:l.direction})}),jsx(Grid.Col,{span:1,style:{display:"flex",justifyContent:"center",alignItems:"center"},children:jsx(ActionIcon,{onClick:()=>d(l.accessor),size:"lg",variant:"default",children:jsx(IconTrash,{size:16})})})]},l.accessor))}),jsx(Space,{h:"md"}),jsxs(Group,{children:[jsx(Button,{color:"gray",disabled:t.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:g,size:"xs",variant:"filled",children:u.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:b,size:"xs",variant:"default",children:u.resetSort})]})]})]})}export{ze as DataTableColumnsToggle,ht as DataTableFilter,At as DataTableSearch,Wt as DataTableSortList,y as EFilterVariant,k as ESortDirection,eo as cleanSearch,to as extractOriginalQueryParams,X as filterSchema,x as mergeQueryKey,K as searchSchema,L as sortSchema,_ as useDataTableColumnsExtend,f as useDataTableQueryParams};
|
|
2
|
+
import {Popover,Button,Stack,Checkbox,Group,Text,NativeSelect,Space,Pagination,TextInput,CloseButton,Badge,Grid,Select,ActionIcon,Indicator,RangeSlider,NumberInput}from'@mantine/core';import {IconColumns,IconSort09,IconTrash,IconPlus,IconRefresh,IconX,IconSearch}from'@tabler/icons-react';import Ht,{createContext,useContext,useState,useMemo,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';import {DataTable}from'mantine-datatable';import {useQueryState,parseAsInteger,parseAsJson}from'nuqs';import Te,{z}from'zod';import {DatePicker}from'@mantine/dates';import z$1 from'dayjs';var pe=createContext(void 0);function P(){let a=useContext(pe);if(!a)throw new Error("useDataTableContext must be used within a DataTableProvider");return a}function Ge({children:a,urlKeys:e,defaultParams:p,storeColumnsKey:o,columns:s,originalUseDataTableColumnsResult:r}){if(!o)throw new Error("storeColumnsKey property is required");if(!s)throw new Error("columns property is required");let[t,u]=useState(0),[m,g]=useState([10,20,30,40,50]),i=useMemo(()=>({totalRecords:t,recordsPerPageOptions:m}),[t,m]),l=useMemo(()=>({urlKeys:e,defaultParams:p,storeColumnsKey:o,columns:s,originalUseDataTableColumnsResult:r,paginationProps:i,setTotalRecords:u,setRecordsPerPageOptions:g}),[e,p,o,s,r,i]);return jsx(pe.Provider,{value:{...l},children:a})}var Ue={columnsToggle:"Columns Toggle"};function Xe({i18n:a=Ue}){let{originalUseDataTableColumnsResult:e}=P(),{effectiveColumns:p,columnsToggle:o,setColumnsToggle:s}=e,r=t=>{s(o.map(u=>u.accessor===t.accessor?{...u,toggled:!u.toggled}:u));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconColumns,{}),variant:"default",children:a.columnsToggle})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:o.filter(t=>t.toggleable).map(t=>jsx(Checkbox,{checked:t.toggled,label:p.find(u=>u.accessor===t.accessor)?.title?.toString()??"",labelPosition:"left",onChange:()=>r(t),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor))})})]})}function qe(a){let{storeColumnsKey:e,originalUseDataTableColumnsResult:p}=P(),{effectiveColumns:o}=p,s={...a,columns:o,storeColumnsKey:e};return jsx(DataTable,{...s})}var B={ASC:"asc",DESC:"desc"},v={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var ue=z.object({accessor:z.string(),direction:z.enum(B)}),de=z.object({accessors:z.array(z.string()),value:z.string()}),me=z.object({variant:z.enum(v),accessor:z.string(),value:z.union([z.string(),z.array(z.string())])});function T(){let a={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},e={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:p,defaultParams:o}=P();p&&(a=p),o&&(e={...e,...o});let[s,r]=useQueryState(a.page,parseAsInteger.withDefault(e.page)),[t,u]=useQueryState(a.pageSize,parseAsInteger.withDefault(e.pageSize)),[m,g]=useQueryState(a.sorts,parseAsJson(Te.array(ue)).withDefault(e.sorts)),[i,l]=useQueryState(a.search,parseAsJson(de).withDefault(e.search)),[c,n]=useQueryState(a.filters,parseAsJson(Te.array(me)).withDefault(e.filters)),d=()=>{r(e.page);},f=()=>{u(e.pageSize);},D=()=>{g(e.sorts);},I=()=>{l(e.search);},ie=()=>{n(e.filters);};return {page:s,setPage:r,pageSize:t,setPageSize:u,sorts:m,setSorts:g,search:i,setSearch:l,filters:c,setFilters:n,resetPage:d,resetPageSize:f,resetSorts:D,resetSearch:I,resetFilters:ie,resetAll:()=>{d(),f(),D(),I(),ie();}}}function De({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(l=>l.accessor===e),t=r?.value?1:0,[u,m]=useState(r?z$1(Number.parseInt(r.value,10)).toISOString():null),g=l=>{if(m(l),l){let c=z$1(l).valueOf().toString();s(r?o.map(n=>n.accessor===e?{...n,value:c}:n):[...o,{variant:p,accessor:e,value:c}]);}},i=()=>{m(null),s(o.filter(l=>l.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{onChange:g,value:u})})]})}function he({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(l=>l.accessor===e),t=r?.value.length??0,[u,m]=useState(r?.value[0]&&r?.value[1]?[z$1(Number.parseInt(r.value[0],10)).toISOString(),z$1(Number.parseInt(r.value[1],10)).toISOString()]:[null,null]),g=([l,c])=>{if(m([l,c]),l&&c){let[n,d]=[z$1(l).valueOf().toString(),z$1(c).valueOf().toString()];s(r?o.map(f=>f.accessor===e?{...f,value:[n,d]}:f):[...o,{variant:p,accessor:e,value:[n,d]}]);}},i=()=>{m([null,null]),s(o.filter(l=>l.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:i,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(DatePicker,{allowSingleDateInRange:true,onChange:g,type:"range",value:u})})]})}function ve({column:a}){let e=a.accessor,p=a.extend?.filterVariant,s=(a.extend?.filterOptions).data,{filters:r,setFilters:t}=T(),u=r.find(c=>c.accessor===e),m=u?.value.length??0,g=c=>{let n=u?.value??[],d=n.includes(c)?n.filter(f=>f!==c):[...n,c];if(d.length===0)t(r.filter(f=>f.accessor!==e));else {let f=r.some(D=>D.accessor===e);t(f?r.map(D=>D.accessor===e?{...D,value:d}:D):[...r,{variant:p,accessor:e,value:d}]);}},i=c=>r.some(n=>n.accessor===e&&n.value.includes(c)),l=()=>{t(r.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:m<=0,processing:true,children:jsxs(Button.Group,{children:[m>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(c=>jsx(Checkbox,{checked:i(c.value),label:c.label,labelPosition:"left",onChange:()=>g(c.value),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${c.value}`))})})]})}function ye({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(i=>i.accessor===e),t=r?.value.length??0,u=i=>{s(r?o.map(l=>l.accessor===e?{...l,value:i.toString()}:l):[...o,{variant:p,accessor:e,value:i.toString()}]);},m=i=>{let l=i;typeof i=="string"&&(l=Number.parseInt(i,10)),u(l);},g=()=>{s(o.filter(i=>i.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(NumberInput,{onChange:i=>m(i),value:r?.value?Number.parseInt(r.value,10):void 0})})]})}function we({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{min:o,max:s,step:r=1,minRange:t=1}=a.extend?.filterOptions,{filters:u,setFilters:m}=T(),g=u.find(d=>d.accessor===e),i=g?.value.length??0,l=d=>{let[f,D]=[d[0].toString(),d[1].toString()];m(g?u.map(I=>I.accessor===e?{...I,value:[f,D]}:I):[...u,{variant:p,accessor:e,value:[f,D]}]);},c=([d,f])=>{l([d,f]);},n=()=>{m(u.filter(d=>d.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:i<=0,processing:true,children:jsxs(Button.Group,{children:[i>0&&jsx(Button,{onClick:n,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(RangeSlider,{max:s,min:o,minRange:t,onChange:c,step:r,value:g?.value[0]&&g?.value[1]?[Number.parseInt(g.value[0],10),Number.parseInt(g.value[1],10)]:[o,s]})})]})}function Re({column:a}){let e=a.accessor,p=a.extend?.filterVariant,s=(a.extend?.filterOptions).data,{filters:r,setFilters:t}=T(),u=r.find(c=>c.accessor===e),m=u?.value.length??0,g=c=>{t(u?r.map(n=>n.accessor===e?{...n,value:c}:n):[...r,{variant:p,accessor:e,value:c}]);},i=c=>u?.value===c,l=()=>{t(r.filter(c=>c.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:m<=0,processing:true,children:jsxs(Button.Group,{children:[m>0&&jsx(Button,{onClick:l,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(c=>jsx(Checkbox,{checked:i(c.value),label:c.label,labelPosition:"left",onChange:()=>g(c.value),radius:"xl",styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},`${e}-${c.value}`))})})]})}function ke({column:a}){let e=a.accessor,p=a.extend?.filterVariant,{filters:o,setFilters:s}=T(),r=o.find(i=>i.accessor===e),t=r?.value.length??0,u=i=>{s(r?i===""?o.filter(l=>l.accessor!==e):o.map(l=>l.accessor===e?{...l,value:i}:l):[...o,{variant:p,accessor:e,value:i}]);},m=i=>{u(i);},g=()=>{s(o.filter(i=>i.accessor!==e));};return jsxs(Popover,{shadow:"md",width:"250px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{disabled:t<=0,processing:true,children:jsxs(Button.Group,{children:[t>0&&jsx(Button,{onClick:g,px:"xs",variant:"default",children:jsx(IconX,{size:16})}),jsx(Button,{variant:"default",children:a.title})]})})}),jsx(Popover.Dropdown,{children:jsx(TextInput,{onChange:i=>m(i.target.value),value:r?.value??""})})]})}var vt={resetFilter:"Reset Filter"};function xt({i18n:a=vt}){let{filters:e,resetFilters:p}=T(),{columns:o}=P(),s=()=>{p();},r=o.filter(t=>t.extend?.filterable);return jsxs(Group,{gap:"xs",children:[r.map(t=>{switch(t.extend?.filterVariant){case v.TEXT:return jsx(ke,{column:t},t.accessor);case v.NUMBER:return jsx(ye,{column:t},t.accessor);case v.SINGLE_SELECT:return jsx(Re,{column:t},t.accessor);case v.MULTI_SELECT:return jsx(ve,{column:t},t.accessor);case v.DATE:return jsx(De,{column:t},t.accessor);case v.DATE_RANGE:return jsx(he,{column:t},t.accessor);case v.NUMBER_RANGE:return jsx(we,{column:t},t.accessor);default:return null}}),e.length>0&&jsx(Button,{onClick:s,variant:"default",children:a.resetFilter})]})}var Rt={rowsPerPage:"Rows per page",pageOfTotalPages:["Page","of"],startEndRecordOfTotalRecords:["","-","/"]};function Et({recordsPerPageOptions:a=[10,20,30,40,50],i18n:e=Rt}){let{page:p,pageSize:o,setPage:s,setPageSize:r}=T(),{paginationProps:t}=P(),{totalRecords:u}=t||{},[m,g]=useState(0),[{startRecord:i,endRecord:l},c]=useState({startRecord:0,endRecord:0});return useEffect(()=>{g(Math.ceil((u||0)/(o||(a[0]??10))));},[u,o,a]),useEffect(()=>{c({startRecord:(p-1)*o+1,endRecord:Math.min(p*o,u||0)});},[p,o,u]),m>0&&jsxs(Group,{align:"center",justify:"space-between",children:[jsx(Group,{children:jsxs(Text,{size:"sm",children:[e.startEndRecordOfTotalRecords[0]," ",i," ",e.startEndRecordOfTotalRecords[1]," ",l," ",e.startEndRecordOfTotalRecords[2]," ",u]})}),jsxs(Group,{children:[jsx(Text,{size:"sm",children:e.rowsPerPage}),jsx(NativeSelect,{data:a.map(n=>({label:n.toString(),value:n.toString()})),onChange:n=>r(Number(n.target.value)),size:"xs",value:o,w:70}),jsx(Space,{w:"md"}),jsxs(Text,{size:"sm",children:[e.pageOfTotalPages[0]," ",p," ",e.pageOfTotalPages[1]," ",m]}),jsx(Pagination,{onChange:n=>s(n),size:"sm",total:m,value:p,withControls:true,withEdges:true})]})]})}function Mt(){let{columns:a}=P(),{search:e,setSearch:p}=T(),o=e.accessors.length,s=a.filter(t=>t.extend?.searchable),r=t=>{e.accessors.includes(t)?p({...e,accessors:e.accessors.filter(u=>u!==t)}):p({...e,accessors:[...e.accessors,t]});};return jsxs(Popover,{shadow:"md",width:"max-content",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Indicator,{color:"transparent",disabled:o<=0,label:jsx(Badge,{circle:true,size:"xs",variant:"outline",children:o}),children:jsx(ActionIcon,{size:36,variant:"default",children:jsx(IconSearch,{size:16})})})}),jsx(Popover.Dropdown,{children:jsx(Stack,{children:s.map(t=>jsx(Checkbox,{checked:e.accessors.includes(t.accessor.toString()),label:t.title?.toString()??"",labelPosition:"left",onChange:()=>r(t.accessor.toString()),styles:{labelWrapper:{display:"flex",justifyContent:"space-between",width:"100%"}},variant:"outline"},t.accessor.toString()))})})]})}var Qt={search:"Search"};function Lt({i18n:a=Qt}){let{search:e,setSearch:p}=T(),o=s=>{p({...e,value:s});};return jsxs(Group,{gap:"xs",children:[jsx(Mt,{}),jsx(TextInput,{onChange:s=>o(s.target.value),placeholder:a.search,rightSection:e.value.length>0&&jsx(CloseButton,{onClick:()=>o(""),size:"sm",variant:"transparent"}),value:e.value,w:"200px"})]})}var Yt={sort:"Sort",addSort:"Add Sort",resetSort:"Reset Sort",asc:"Asc",desc:"Desc"};function Zt({i18n:a=Yt}){let{sorts:e,setSorts:p,resetSorts:o}=T(),{columns:s}=P(),r=s.filter(n=>n.extend?.sortable),t=r.filter(n=>!e.some(d=>d.accessor===n.accessor)),u=e.length,m=()=>{if(t.length>0&&t[0]){let n={accessor:t[0].accessor,direction:B.ASC};p([...e,n]);}},g=()=>{o();},i=n=>{p(e.filter(d=>d.accessor!==n));},l=(n,d)=>{if(d===null)return;let f=e.filter(D=>D.accessor!==n&&D.accessor!==d);p([...f,{accessor:d,direction:e.find(D=>D.accessor===n)?.direction||B.ASC}]);},c=(n,d)=>{d!==null&&p(e.map(f=>f.accessor===n?{...f,direction:d}:f));};return jsxs(Popover,{shadow:"md",width:"450px",withArrow:true,children:[jsx(Popover.Target,{children:jsx(Button,{leftSection:jsx(IconSort09,{}),rightSection:jsx(Badge,{circle:true,variant:"outline",children:u}),variant:"default",children:a.sort})}),jsxs(Popover.Dropdown,{children:[jsx(Grid,{children:e.map(n=>jsxs(Ht.Fragment,{children:[jsx(Grid.Col,{span:6,children:jsx(Select,{comboboxProps:{withinPortal:false},data:r.map(d=>({label:d.title?.toString()??"",value:d.accessor})),onChange:d=>l(n.accessor,d),value:n.accessor})}),jsx(Grid.Col,{span:4,children:jsx(Select,{comboboxProps:{withinPortal:false},data:Object.values(B).map(d=>({label:a[d]??"",value:d})),onChange:d=>c(n.accessor,d),value:n.direction})}),jsx(Grid.Col,{span:1,style:{display:"flex",justifyContent:"center",alignItems:"center"},children:jsx(ActionIcon,{onClick:()=>i(n.accessor),size:"lg",variant:"default",children:jsx(IconTrash,{size:16})})})]},n.accessor))}),jsx(Space,{h:"md"}),jsxs(Group,{children:[jsx(Button,{color:"dark",disabled:t.length===0,leftSection:jsx(IconPlus,{size:16}),onClick:m,size:"sm",variant:"filled",children:a.addSort}),jsx(Button,{leftSection:jsx(IconRefresh,{size:16}),onClick:g,size:"sm",variant:"default",children:a.resetSort})]})]})]})}export{Xe as DataTableColumnsToggle,qe as DataTableExtended,xt as DataTableFilter,Et as DataTablePagination,Ge as DataTableProvider,Lt as DataTableSearch,Zt as DataTableSortList,P as useDataTableContext,T as useDataTableQueryParams};
|
package/dist/server.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as nuqs_server from 'nuqs/server';
|
|
2
|
-
import {
|
|
2
|
+
import { D as DataTableContextProps } from './data-table-provider.type-CblXE_l1.js';
|
|
3
|
+
import 'mantine-datatable';
|
|
3
4
|
import 'zod';
|
|
4
5
|
|
|
5
|
-
declare const createDataTableLoader: (props?:
|
|
6
|
+
declare const createDataTableLoader: (props?: Pick<DataTableContextProps, "urlKeys" | "defaultParams">) => nuqs_server.LoaderFunction<{
|
|
6
7
|
[x: string]: (Omit<nuqs_server.SingleParserBuilder<number>, "parseServerSide"> & {
|
|
7
8
|
readonly defaultValue: number;
|
|
8
9
|
parseServerSide(value: string | string[] | undefined): number;
|
package/dist/server.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z}from'zod';var i={ASC:"asc",DESC:"desc"},
|
|
1
|
+
import {parseAsJson,parseAsInteger,createLoader}from'nuqs/server';import {z as z$1}from'zod';var i={ASC:"asc",DESC:"desc"},c={TEXT:"text",NUMBER:"number",NUMBER_RANGE:"number_range",DATE:"date",DATE_RANGE:"date_range",SINGLE_SELECT:"single_select",MULTI_SELECT:"multi_select"};var n=z$1.object({accessor:z$1.string(),direction:z$1.enum(i)}),p=z$1.object({accessors:z$1.array(z$1.string()),value:z$1.string()}),l=z$1.object({variant:z$1.enum(c),accessor:z$1.string(),value:z$1.union([z$1.string(),z$1.array(z$1.string())])});var z=(y={})=>{let r={page:"page",pageSize:"pageSize",sorts:"sorts",search:"search",filters:"filters"},t={page:1,pageSize:10,sorts:[],search:{accessors:[],value:""},filters:[]},{urlKeys:o,defaultParams:s}=y;o&&(r=o),s&&(t={...t,...s});let S={[`${r.page}`]:parseAsInteger.withDefault(t.page),[`${r.pageSize}`]:parseAsInteger.withDefault(t.pageSize),[`${r.sorts}`]:parseAsJson(z$1.array(n)).withDefault(t.sorts),[`${r.search}`]:parseAsJson(p).withDefault(t.search),[`${r.filters}`]:parseAsJson(z$1.array(l)).withDefault(t.filters)};return createLoader(S)};export{z as createDataTableLoader};
|
package/package.json
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-datatable-extended",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
5
|
-
"
|
|
6
|
-
|
|
4
|
+
"version": "0.2.0",
|
|
5
|
+
"description": "An extension library for Mantine DataTable, providing powerful and easy-to-use features for building data tables in React applications.",
|
|
6
|
+
"tags": [
|
|
7
|
+
"mantine",
|
|
8
|
+
"datatable",
|
|
9
|
+
"react",
|
|
10
|
+
"typescript",
|
|
11
|
+
"data-table",
|
|
12
|
+
"table-component",
|
|
13
|
+
"react-table"
|
|
14
|
+
],
|
|
15
|
+
"repository": "hoaaq/mantine-datatable-extended",
|
|
16
|
+
"homepage": "https://mantine-datatable-extended.hoaaq.dev/",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/hoaaq/mantine-datatable-extended/issues"
|
|
19
|
+
},
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"author": {
|
|
22
|
+
"name": "Au Quoc Hoa",
|
|
23
|
+
"email": "hoaauquoc@gmail.com",
|
|
24
|
+
"url": "https://hoaaq.dev"
|
|
7
25
|
},
|
|
8
26
|
"exports": {
|
|
9
27
|
".": {
|
|
@@ -18,18 +36,16 @@
|
|
|
18
36
|
}
|
|
19
37
|
},
|
|
20
38
|
"files": [
|
|
21
|
-
"dist"
|
|
39
|
+
"./dist",
|
|
40
|
+
"./README.md",
|
|
41
|
+
"./LICENSE"
|
|
22
42
|
],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"build": "tsup",
|
|
25
|
-
"dev": "tsup --watch"
|
|
26
|
-
},
|
|
27
43
|
"devDependencies": {
|
|
28
|
-
"@
|
|
29
|
-
"@types/react": "
|
|
30
|
-
"@types/react-dom": "catalog:",
|
|
44
|
+
"@types/react": "^19.2.7",
|
|
45
|
+
"@types/react-dom": "^19.2.3",
|
|
31
46
|
"tsup": "^8.0.0",
|
|
32
|
-
"typescript": "^5"
|
|
47
|
+
"typescript": "^5",
|
|
48
|
+
"@repo/config": "0.0.0"
|
|
33
49
|
},
|
|
34
50
|
"peerDependencies": {
|
|
35
51
|
"@mantine/core": ">=8.3",
|
|
@@ -44,5 +60,9 @@
|
|
|
44
60
|
"react-dom": ">=19",
|
|
45
61
|
"zod": ">=4.1"
|
|
46
62
|
},
|
|
47
|
-
"sideEffects": false
|
|
48
|
-
|
|
63
|
+
"sideEffects": false,
|
|
64
|
+
"scripts": {
|
|
65
|
+
"build": "tsup",
|
|
66
|
+
"dev": "tsup --watch"
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
|
|
3
|
-
declare const sortSchema: z.ZodObject<{
|
|
4
|
-
accessor: z.ZodString;
|
|
5
|
-
direction: z.ZodEnum<{
|
|
6
|
-
readonly ASC: "asc";
|
|
7
|
-
readonly DESC: "desc";
|
|
8
|
-
}>;
|
|
9
|
-
}, z.core.$strip>;
|
|
10
|
-
type TSortCondition = z.infer<typeof sortSchema>;
|
|
11
|
-
declare const searchSchema: z.ZodObject<{
|
|
12
|
-
accessors: z.ZodArray<z.ZodString>;
|
|
13
|
-
value: z.ZodString;
|
|
14
|
-
}, z.core.$strip>;
|
|
15
|
-
type TSearchCondition = z.infer<typeof searchSchema>;
|
|
16
|
-
declare const filterSchema: z.ZodObject<{
|
|
17
|
-
variant: z.ZodEnum<{
|
|
18
|
-
readonly TEXT: "text";
|
|
19
|
-
readonly NUMBER: "number";
|
|
20
|
-
readonly NUMBER_RANGE: "number_range";
|
|
21
|
-
readonly DATE: "date";
|
|
22
|
-
readonly DATE_RANGE: "date_range";
|
|
23
|
-
readonly SINGLE_SELECT: "single_select";
|
|
24
|
-
readonly MULTI_SELECT: "multi_select";
|
|
25
|
-
}>;
|
|
26
|
-
accessor: z.ZodString;
|
|
27
|
-
value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
|
|
28
|
-
}, z.core.$strip>;
|
|
29
|
-
type TFilterCondition = z.infer<typeof filterSchema>;
|
|
30
|
-
|
|
31
|
-
type ExtendedDataTableProps = {
|
|
32
|
-
prefixQueryKey?: string;
|
|
33
|
-
defaultSorts?: TSortCondition[];
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export { type ExtendedDataTableProps as E, type TSortCondition as T, type TSearchCondition as a, type TFilterCondition as b, sortSchema as c, filterSchema as f, searchSchema as s };
|