@nexgrid/react 0.1.0 → 0.2.1
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/README.md +81 -65
- package/dist/index.cjs +1045 -318
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +112 -37
- package/dist/index.d.ts +112 -37
- package/dist/index.js +1070 -330
- package/dist/index.js.map +1 -1
- package/package.json +6 -4
- package/styles.css +1724 -445
package/dist/index.d.cts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledSort } from '@nexgrid/core';
|
|
3
|
+
import { TableXColumn, QueryState, Density, ExcelBadgeRule, TableXLocale, ClientQueryOptions } from '@nexgrid/core';
|
|
4
|
+
export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, TableXCellContext, TableXColumn, TableXColumnMeta, TableXLocale, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledMultiSort, withToggledSort } from '@nexgrid/core';
|
|
5
5
|
|
|
6
6
|
/** A column definition bound to React's render type. */
|
|
7
|
-
type
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
type TableXReactColumn<TData> = TableXColumn<TData, ReactNode>;
|
|
8
|
+
type NexGridReactColumn<TData> = TableXReactColumn<TData>;
|
|
9
|
+
/** Severity of a {@link TableXNotice}. */
|
|
10
|
+
type TableXNoticeType = "info" | "success" | "error";
|
|
11
|
+
type NexGridNoticeType = TableXNoticeType;
|
|
10
12
|
/**
|
|
11
13
|
* A message the grid wants surfaced to the user.
|
|
12
14
|
*
|
|
@@ -14,31 +16,41 @@ type NexGridNoticeType = "info" | "success" | "error";
|
|
|
14
16
|
* design system, and two competing toast stacks in one page is a worse bug
|
|
15
17
|
* than no toast at all. Everything it would want to say arrives here instead.
|
|
16
18
|
*/
|
|
17
|
-
interface
|
|
18
|
-
type:
|
|
19
|
+
interface TableXNotice {
|
|
20
|
+
type: TableXNoticeType;
|
|
19
21
|
message: string;
|
|
20
22
|
}
|
|
23
|
+
type NexGridNotice = TableXNotice;
|
|
21
24
|
/** Color scheme applied to the grid root. */
|
|
22
|
-
type
|
|
25
|
+
type TableXTheme = "light" | "dark" | "auto";
|
|
26
|
+
type NexGridTheme = TableXTheme;
|
|
23
27
|
/**
|
|
24
|
-
* Props for {@link
|
|
28
|
+
* Props for {@link TableX}.
|
|
25
29
|
*
|
|
26
30
|
* `data` / `total` / `query` / `onQueryChange` are **controlled**: the grid
|
|
27
31
|
* renders exactly the page it is handed and reports intent back through
|
|
28
32
|
* `onQueryChange`. It never fetches on its own (the one exception is the
|
|
29
33
|
* export-everything path, which needs rows the current page does not have).
|
|
30
34
|
*/
|
|
31
|
-
interface
|
|
35
|
+
interface TableXProps<TData> {
|
|
32
36
|
/** Column definitions, in display order. */
|
|
33
|
-
columns:
|
|
34
|
-
/** The CURRENT page of rows
|
|
37
|
+
columns: TableXReactColumn<TData>[];
|
|
38
|
+
/** The CURRENT page of rows (server mode) or the full in-memory dataset (client-side mode). */
|
|
35
39
|
data: TData[];
|
|
36
|
-
/** Total filtered row count from the server; drives the pager. */
|
|
37
|
-
total
|
|
38
|
-
/** The query the `data`
|
|
39
|
-
query
|
|
40
|
-
/** Called with the next query whenever the user changes page/sort/search/size. */
|
|
41
|
-
onQueryChange
|
|
40
|
+
/** Total filtered row count from the server; drives the pager. In client-side mode, this is computed automatically. */
|
|
41
|
+
total?: number;
|
|
42
|
+
/** The query the `data` answers. In client-side mode, this is managed internally if omitted. */
|
|
43
|
+
query?: QueryState;
|
|
44
|
+
/** Called with the next query whenever the user changes page/sort/search/size. Optional in client-side mode. */
|
|
45
|
+
onQueryChange?: (next: QueryState) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Enable client-side pagination, sorting, search, and filtering over in-memory `data`.
|
|
48
|
+
* When enabled (or when `paginationMode: "client"`), the grid manages page slicing,
|
|
49
|
+
* total counts, search, and sorting internally. Default is auto (true when onQueryChange is omitted).
|
|
50
|
+
*/
|
|
51
|
+
clientSidePagination?: boolean;
|
|
52
|
+
/** Explicit pagination mode: `"server"` (default with onQueryChange) or `"client"`. */
|
|
53
|
+
paginationMode?: "client" | "server";
|
|
42
54
|
/** Accessible name for the table. Also the default export file name and sheet title. */
|
|
43
55
|
caption: string;
|
|
44
56
|
/** Initial row density. Later changes to this prop are ignored — the user owns it from then on. Default `"default"`. */
|
|
@@ -51,6 +63,12 @@ interface NexGridProps<TData> {
|
|
|
51
63
|
onRetry?: () => void;
|
|
52
64
|
/** Render selection checkboxes. Default `false`. */
|
|
53
65
|
enableSelection?: boolean;
|
|
66
|
+
/** Selection mode: `"multi"` (default) or `"single"`. */
|
|
67
|
+
selectionMode?: "multi" | "single";
|
|
68
|
+
/** Enable column-level filter menus on column headers. Default `false` (or per-column). */
|
|
69
|
+
enableColumnFilters?: boolean;
|
|
70
|
+
/** Enable dragging column borders to resize columns. Default `true`. */
|
|
71
|
+
enableColumnResize?: boolean;
|
|
54
72
|
/**
|
|
55
73
|
* Called with every selected row id after each change.
|
|
56
74
|
* `allAcrossSelected` is reserved for a future "select all matching rows"
|
|
@@ -61,6 +79,59 @@ interface NexGridProps<TData> {
|
|
|
61
79
|
enableSearch?: boolean;
|
|
62
80
|
/** Overrides `locale.searchPlaceholder`. */
|
|
63
81
|
searchPlaceholder?: string;
|
|
82
|
+
/** Show the columns toggle dropdown menu button. Default `true`. */
|
|
83
|
+
enableColumns?: boolean;
|
|
84
|
+
/** Alias for enableColumns. */
|
|
85
|
+
showColumnsButton?: boolean;
|
|
86
|
+
/** Show the density dropdown menu button. Default `true`. */
|
|
87
|
+
enableDensity?: boolean;
|
|
88
|
+
/** Alias for enableDensity. */
|
|
89
|
+
showDensityButton?: boolean;
|
|
90
|
+
/** Show the export menu. Default `true`. */
|
|
91
|
+
enableExport?: boolean;
|
|
92
|
+
/** Alias for enableExport. */
|
|
93
|
+
showExportButton?: boolean;
|
|
94
|
+
/** Enable sorting across all columns. Default `true`. */
|
|
95
|
+
enableSorting?: boolean;
|
|
96
|
+
/** Show the footer pagination controls. Default `true`. */
|
|
97
|
+
enablePagination?: boolean;
|
|
98
|
+
/** Alias for enablePagination. */
|
|
99
|
+
showPagination?: boolean;
|
|
100
|
+
/** Show the rows-per-page dropdown in the footer. Default `true`. */
|
|
101
|
+
enableRowsPerPage?: boolean;
|
|
102
|
+
/** Alias for enableRowsPerPage. */
|
|
103
|
+
showRowsPerPage?: boolean;
|
|
104
|
+
/** Show the jump to page input in the footer. Default `true`. */
|
|
105
|
+
enableJumpToPage?: boolean;
|
|
106
|
+
/** Alias for enableJumpToPage. */
|
|
107
|
+
showJumpToPage?: boolean;
|
|
108
|
+
/** Show the entire toolbar area. Default `true`. */
|
|
109
|
+
showToolbar?: boolean;
|
|
110
|
+
/** Show the entire footer area. Default `true`. */
|
|
111
|
+
showFooter?: boolean;
|
|
112
|
+
/** Custom renderer for expanded accordion sub-rows. */
|
|
113
|
+
renderExpandedRow?: (row: TData) => ReactNode;
|
|
114
|
+
/** Enable floating bulk actions bar when rows are selected. Default `true`. */
|
|
115
|
+
enableBulkActions?: boolean;
|
|
116
|
+
/** Custom bulk actions renderer receiving selected IDs. */
|
|
117
|
+
bulkActions?: (selectedIds: string[], deselectAll: () => void) => ReactNode;
|
|
118
|
+
/** Enable summary / aggregation footer row. Default auto (true if any column defines meta.aggregation). */
|
|
119
|
+
enableSummaryRow?: boolean;
|
|
120
|
+
/** Enable drag-and-drop column header reordering. Default `false`. */
|
|
121
|
+
enableColumnReorder?: boolean;
|
|
122
|
+
/** Called when column order changes via drag-and-drop reordering. */
|
|
123
|
+
onColumnOrderChange?: (newOrder: string[]) => void;
|
|
124
|
+
/** Called when a cell's value is committed via inline cell editing. */
|
|
125
|
+
onCellEdit?: (edit: {
|
|
126
|
+
row: TData;
|
|
127
|
+
columnId: string;
|
|
128
|
+
oldValue: unknown;
|
|
129
|
+
newValue: unknown;
|
|
130
|
+
}) => void;
|
|
131
|
+
/** Unique key to persist and restore grid state (column widths, column order, hidden columns, density) in localStorage. */
|
|
132
|
+
storageKey?: string;
|
|
133
|
+
/** Show the active filter pills bar beneath the toolbar when filters or search are active. Default `true`. */
|
|
134
|
+
showFilterPills?: boolean;
|
|
64
135
|
/** Rendered at the end of the toolbar, after the export menu. */
|
|
65
136
|
toolbarActions?: ReactNode;
|
|
66
137
|
/** Clicking a row (or a card) invokes this. Adds a pointer cursor. */
|
|
@@ -71,26 +142,27 @@ interface NexGridProps<TData> {
|
|
|
71
142
|
className?: string;
|
|
72
143
|
/** Show the automatic `S.No.` column. Default `true`. */
|
|
73
144
|
showSerialNumber?: boolean;
|
|
74
|
-
/** Show the export menu. Default `true`. */
|
|
75
|
-
enableExport?: boolean;
|
|
76
145
|
/** File name prefix, without extension. Default: the caption, lower-cased and underscored. */
|
|
77
146
|
exportFileName?: string;
|
|
78
147
|
/** Take over exporting entirely; when set, the grid's own export flow never runs. */
|
|
79
148
|
onExportAll?: () => void | Promise<void>;
|
|
80
149
|
/**
|
|
81
|
-
*
|
|
82
|
-
*
|
|
150
|
+
* Endpoint used to fetch the full filtered dataset for export when the current
|
|
151
|
+
* page is only part of it.
|
|
83
152
|
*/
|
|
84
153
|
fetchEndpoint?: string;
|
|
85
|
-
/**
|
|
154
|
+
/** Extra fetch options (headers, etc.) forwarded when calling {@link fetchEndpoint}. */
|
|
155
|
+
fetchOptions?: RequestInit;
|
|
156
|
+
/** Value-based badge styling rules for Excel export. */
|
|
86
157
|
badgeRules?: readonly ExcelBadgeRule[];
|
|
87
|
-
/** Overrides for any user-facing string. */
|
|
88
|
-
locale?: Partial<
|
|
89
|
-
/**
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
|
|
158
|
+
/** Overrides for any user-facing string in the grid. */
|
|
159
|
+
locale?: Partial<TableXLocale>;
|
|
160
|
+
/** Visual theme. Default `"light"`. */
|
|
161
|
+
theme?: TableXTheme;
|
|
162
|
+
/** Receives notices (export progress, failures). Default: no-op. */
|
|
163
|
+
onNotify?: (notice: TableXNotice) => void;
|
|
93
164
|
}
|
|
165
|
+
type NexGridProps<TData> = TableXProps<TData>;
|
|
94
166
|
|
|
95
167
|
/**
|
|
96
168
|
* A server-driven data grid: search, sorting, column visibility, density,
|
|
@@ -98,7 +170,7 @@ interface NexGridProps<TData> {
|
|
|
98
170
|
*
|
|
99
171
|
* `data`, `total`, `query` and `onQueryChange` are controlled by the host — the
|
|
100
172
|
* grid renders the page it is given and never fetches on its own (the one
|
|
101
|
-
* exception being {@link
|
|
173
|
+
* exception being {@link TableXProps.fetchEndpoint}, used to page in the rest
|
|
102
174
|
* of the dataset for an export).
|
|
103
175
|
*
|
|
104
176
|
* @example
|
|
@@ -114,13 +186,15 @@ interface NexGridProps<TData> {
|
|
|
114
186
|
* />
|
|
115
187
|
* ```
|
|
116
188
|
*/
|
|
117
|
-
declare function
|
|
189
|
+
declare function TableX<TData>(props: TableXProps<TData>): react.JSX.Element;
|
|
190
|
+
declare const NexGrid: typeof TableX;
|
|
118
191
|
|
|
119
|
-
/** Options for {@link
|
|
120
|
-
interface
|
|
192
|
+
/** Options for {@link useClientTableX}. */
|
|
193
|
+
interface UseClientTableXOptions<TData> extends ClientQueryOptions<TData> {
|
|
121
194
|
/** Optional initial query state overrides. */
|
|
122
195
|
initialQuery?: Partial<QueryState>;
|
|
123
196
|
}
|
|
197
|
+
type UseClientNexGridOptions<TData> = UseClientTableXOptions<TData>;
|
|
124
198
|
/**
|
|
125
199
|
* React hook for effortless in-memory client-side grid operations.
|
|
126
200
|
*
|
|
@@ -130,10 +204,10 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
|
|
|
130
204
|
* @example
|
|
131
205
|
* ```tsx
|
|
132
206
|
* export function StudentsGrid({ allStudents }: { allStudents: Student[] }) {
|
|
133
|
-
* const grid =
|
|
207
|
+
* const grid = useClientTableX(allStudents);
|
|
134
208
|
*
|
|
135
209
|
* return (
|
|
136
|
-
* <
|
|
210
|
+
* <TableX
|
|
137
211
|
* caption="Students"
|
|
138
212
|
* columns={columns}
|
|
139
213
|
* {...grid}
|
|
@@ -142,7 +216,7 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
|
|
|
142
216
|
* }
|
|
143
217
|
* ```
|
|
144
218
|
*/
|
|
145
|
-
declare function
|
|
219
|
+
declare function useClientTableX<TData>(allData: readonly TData[], options?: UseClientTableXOptions<TData>): {
|
|
146
220
|
data: TData[];
|
|
147
221
|
total: number;
|
|
148
222
|
query: QueryState;
|
|
@@ -152,5 +226,6 @@ declare function useClientNexGrid<TData>(allData: readonly TData[], options?: Us
|
|
|
152
226
|
totalPages: number;
|
|
153
227
|
setQuery: react.Dispatch<react.SetStateAction<QueryState>>;
|
|
154
228
|
};
|
|
229
|
+
declare const useClientNexGrid: typeof useClientTableX;
|
|
155
230
|
|
|
156
|
-
export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, type UseClientNexGridOptions, useClientNexGrid };
|
|
231
|
+
export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, TableX, type TableXNotice, type TableXNoticeType, type TableXProps, type TableXReactColumn, type TableXTheme, type UseClientNexGridOptions, type UseClientTableXOptions, useClientNexGrid, useClientTableX };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledSort } from '@nexgrid/core';
|
|
3
|
+
import { TableXColumn, QueryState, Density, ExcelBadgeRule, TableXLocale, ClientQueryOptions } from '@nexgrid/core';
|
|
4
|
+
export { ClientQueryOptions, DEFAULT_LOCALE, DEFAULT_PAGE_SIZE, Density, ExcelBadgeRule, NexGridCellContext, NexGridColumn, NexGridColumnMeta, NexGridLocale, PAGE_SIZES, PageSize, PagedResponse, QueryState, SortDir, SortSpec, TableXCellContext, TableXColumn, TableXColumnMeta, TableXLocale, buildODataUrl, buildQueryUrl, defaultQuery, fromODataResponse, isPageSize, parseQuery, primarySort, queryClientData, resolveLocale, serializeQuery, toODataParams, totalPagesFor, withFilter, withPage, withPageSize, withSearch, withSort, withToggledMultiSort, withToggledSort } from '@nexgrid/core';
|
|
5
5
|
|
|
6
6
|
/** A column definition bound to React's render type. */
|
|
7
|
-
type
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
type TableXReactColumn<TData> = TableXColumn<TData, ReactNode>;
|
|
8
|
+
type NexGridReactColumn<TData> = TableXReactColumn<TData>;
|
|
9
|
+
/** Severity of a {@link TableXNotice}. */
|
|
10
|
+
type TableXNoticeType = "info" | "success" | "error";
|
|
11
|
+
type NexGridNoticeType = TableXNoticeType;
|
|
10
12
|
/**
|
|
11
13
|
* A message the grid wants surfaced to the user.
|
|
12
14
|
*
|
|
@@ -14,31 +16,41 @@ type NexGridNoticeType = "info" | "success" | "error";
|
|
|
14
16
|
* design system, and two competing toast stacks in one page is a worse bug
|
|
15
17
|
* than no toast at all. Everything it would want to say arrives here instead.
|
|
16
18
|
*/
|
|
17
|
-
interface
|
|
18
|
-
type:
|
|
19
|
+
interface TableXNotice {
|
|
20
|
+
type: TableXNoticeType;
|
|
19
21
|
message: string;
|
|
20
22
|
}
|
|
23
|
+
type NexGridNotice = TableXNotice;
|
|
21
24
|
/** Color scheme applied to the grid root. */
|
|
22
|
-
type
|
|
25
|
+
type TableXTheme = "light" | "dark" | "auto";
|
|
26
|
+
type NexGridTheme = TableXTheme;
|
|
23
27
|
/**
|
|
24
|
-
* Props for {@link
|
|
28
|
+
* Props for {@link TableX}.
|
|
25
29
|
*
|
|
26
30
|
* `data` / `total` / `query` / `onQueryChange` are **controlled**: the grid
|
|
27
31
|
* renders exactly the page it is handed and reports intent back through
|
|
28
32
|
* `onQueryChange`. It never fetches on its own (the one exception is the
|
|
29
33
|
* export-everything path, which needs rows the current page does not have).
|
|
30
34
|
*/
|
|
31
|
-
interface
|
|
35
|
+
interface TableXProps<TData> {
|
|
32
36
|
/** Column definitions, in display order. */
|
|
33
|
-
columns:
|
|
34
|
-
/** The CURRENT page of rows
|
|
37
|
+
columns: TableXReactColumn<TData>[];
|
|
38
|
+
/** The CURRENT page of rows (server mode) or the full in-memory dataset (client-side mode). */
|
|
35
39
|
data: TData[];
|
|
36
|
-
/** Total filtered row count from the server; drives the pager. */
|
|
37
|
-
total
|
|
38
|
-
/** The query the `data`
|
|
39
|
-
query
|
|
40
|
-
/** Called with the next query whenever the user changes page/sort/search/size. */
|
|
41
|
-
onQueryChange
|
|
40
|
+
/** Total filtered row count from the server; drives the pager. In client-side mode, this is computed automatically. */
|
|
41
|
+
total?: number;
|
|
42
|
+
/** The query the `data` answers. In client-side mode, this is managed internally if omitted. */
|
|
43
|
+
query?: QueryState;
|
|
44
|
+
/** Called with the next query whenever the user changes page/sort/search/size. Optional in client-side mode. */
|
|
45
|
+
onQueryChange?: (next: QueryState) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Enable client-side pagination, sorting, search, and filtering over in-memory `data`.
|
|
48
|
+
* When enabled (or when `paginationMode: "client"`), the grid manages page slicing,
|
|
49
|
+
* total counts, search, and sorting internally. Default is auto (true when onQueryChange is omitted).
|
|
50
|
+
*/
|
|
51
|
+
clientSidePagination?: boolean;
|
|
52
|
+
/** Explicit pagination mode: `"server"` (default with onQueryChange) or `"client"`. */
|
|
53
|
+
paginationMode?: "client" | "server";
|
|
42
54
|
/** Accessible name for the table. Also the default export file name and sheet title. */
|
|
43
55
|
caption: string;
|
|
44
56
|
/** Initial row density. Later changes to this prop are ignored — the user owns it from then on. Default `"default"`. */
|
|
@@ -51,6 +63,12 @@ interface NexGridProps<TData> {
|
|
|
51
63
|
onRetry?: () => void;
|
|
52
64
|
/** Render selection checkboxes. Default `false`. */
|
|
53
65
|
enableSelection?: boolean;
|
|
66
|
+
/** Selection mode: `"multi"` (default) or `"single"`. */
|
|
67
|
+
selectionMode?: "multi" | "single";
|
|
68
|
+
/** Enable column-level filter menus on column headers. Default `false` (or per-column). */
|
|
69
|
+
enableColumnFilters?: boolean;
|
|
70
|
+
/** Enable dragging column borders to resize columns. Default `true`. */
|
|
71
|
+
enableColumnResize?: boolean;
|
|
54
72
|
/**
|
|
55
73
|
* Called with every selected row id after each change.
|
|
56
74
|
* `allAcrossSelected` is reserved for a future "select all matching rows"
|
|
@@ -61,6 +79,59 @@ interface NexGridProps<TData> {
|
|
|
61
79
|
enableSearch?: boolean;
|
|
62
80
|
/** Overrides `locale.searchPlaceholder`. */
|
|
63
81
|
searchPlaceholder?: string;
|
|
82
|
+
/** Show the columns toggle dropdown menu button. Default `true`. */
|
|
83
|
+
enableColumns?: boolean;
|
|
84
|
+
/** Alias for enableColumns. */
|
|
85
|
+
showColumnsButton?: boolean;
|
|
86
|
+
/** Show the density dropdown menu button. Default `true`. */
|
|
87
|
+
enableDensity?: boolean;
|
|
88
|
+
/** Alias for enableDensity. */
|
|
89
|
+
showDensityButton?: boolean;
|
|
90
|
+
/** Show the export menu. Default `true`. */
|
|
91
|
+
enableExport?: boolean;
|
|
92
|
+
/** Alias for enableExport. */
|
|
93
|
+
showExportButton?: boolean;
|
|
94
|
+
/** Enable sorting across all columns. Default `true`. */
|
|
95
|
+
enableSorting?: boolean;
|
|
96
|
+
/** Show the footer pagination controls. Default `true`. */
|
|
97
|
+
enablePagination?: boolean;
|
|
98
|
+
/** Alias for enablePagination. */
|
|
99
|
+
showPagination?: boolean;
|
|
100
|
+
/** Show the rows-per-page dropdown in the footer. Default `true`. */
|
|
101
|
+
enableRowsPerPage?: boolean;
|
|
102
|
+
/** Alias for enableRowsPerPage. */
|
|
103
|
+
showRowsPerPage?: boolean;
|
|
104
|
+
/** Show the jump to page input in the footer. Default `true`. */
|
|
105
|
+
enableJumpToPage?: boolean;
|
|
106
|
+
/** Alias for enableJumpToPage. */
|
|
107
|
+
showJumpToPage?: boolean;
|
|
108
|
+
/** Show the entire toolbar area. Default `true`. */
|
|
109
|
+
showToolbar?: boolean;
|
|
110
|
+
/** Show the entire footer area. Default `true`. */
|
|
111
|
+
showFooter?: boolean;
|
|
112
|
+
/** Custom renderer for expanded accordion sub-rows. */
|
|
113
|
+
renderExpandedRow?: (row: TData) => ReactNode;
|
|
114
|
+
/** Enable floating bulk actions bar when rows are selected. Default `true`. */
|
|
115
|
+
enableBulkActions?: boolean;
|
|
116
|
+
/** Custom bulk actions renderer receiving selected IDs. */
|
|
117
|
+
bulkActions?: (selectedIds: string[], deselectAll: () => void) => ReactNode;
|
|
118
|
+
/** Enable summary / aggregation footer row. Default auto (true if any column defines meta.aggregation). */
|
|
119
|
+
enableSummaryRow?: boolean;
|
|
120
|
+
/** Enable drag-and-drop column header reordering. Default `false`. */
|
|
121
|
+
enableColumnReorder?: boolean;
|
|
122
|
+
/** Called when column order changes via drag-and-drop reordering. */
|
|
123
|
+
onColumnOrderChange?: (newOrder: string[]) => void;
|
|
124
|
+
/** Called when a cell's value is committed via inline cell editing. */
|
|
125
|
+
onCellEdit?: (edit: {
|
|
126
|
+
row: TData;
|
|
127
|
+
columnId: string;
|
|
128
|
+
oldValue: unknown;
|
|
129
|
+
newValue: unknown;
|
|
130
|
+
}) => void;
|
|
131
|
+
/** Unique key to persist and restore grid state (column widths, column order, hidden columns, density) in localStorage. */
|
|
132
|
+
storageKey?: string;
|
|
133
|
+
/** Show the active filter pills bar beneath the toolbar when filters or search are active. Default `true`. */
|
|
134
|
+
showFilterPills?: boolean;
|
|
64
135
|
/** Rendered at the end of the toolbar, after the export menu. */
|
|
65
136
|
toolbarActions?: ReactNode;
|
|
66
137
|
/** Clicking a row (or a card) invokes this. Adds a pointer cursor. */
|
|
@@ -71,26 +142,27 @@ interface NexGridProps<TData> {
|
|
|
71
142
|
className?: string;
|
|
72
143
|
/** Show the automatic `S.No.` column. Default `true`. */
|
|
73
144
|
showSerialNumber?: boolean;
|
|
74
|
-
/** Show the export menu. Default `true`. */
|
|
75
|
-
enableExport?: boolean;
|
|
76
145
|
/** File name prefix, without extension. Default: the caption, lower-cased and underscored. */
|
|
77
146
|
exportFileName?: string;
|
|
78
147
|
/** Take over exporting entirely; when set, the grid's own export flow never runs. */
|
|
79
148
|
onExportAll?: () => void | Promise<void>;
|
|
80
149
|
/**
|
|
81
|
-
*
|
|
82
|
-
*
|
|
150
|
+
* Endpoint used to fetch the full filtered dataset for export when the current
|
|
151
|
+
* page is only part of it.
|
|
83
152
|
*/
|
|
84
153
|
fetchEndpoint?: string;
|
|
85
|
-
/**
|
|
154
|
+
/** Extra fetch options (headers, etc.) forwarded when calling {@link fetchEndpoint}. */
|
|
155
|
+
fetchOptions?: RequestInit;
|
|
156
|
+
/** Value-based badge styling rules for Excel export. */
|
|
86
157
|
badgeRules?: readonly ExcelBadgeRule[];
|
|
87
|
-
/** Overrides for any user-facing string. */
|
|
88
|
-
locale?: Partial<
|
|
89
|
-
/**
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
|
|
158
|
+
/** Overrides for any user-facing string in the grid. */
|
|
159
|
+
locale?: Partial<TableXLocale>;
|
|
160
|
+
/** Visual theme. Default `"light"`. */
|
|
161
|
+
theme?: TableXTheme;
|
|
162
|
+
/** Receives notices (export progress, failures). Default: no-op. */
|
|
163
|
+
onNotify?: (notice: TableXNotice) => void;
|
|
93
164
|
}
|
|
165
|
+
type NexGridProps<TData> = TableXProps<TData>;
|
|
94
166
|
|
|
95
167
|
/**
|
|
96
168
|
* A server-driven data grid: search, sorting, column visibility, density,
|
|
@@ -98,7 +170,7 @@ interface NexGridProps<TData> {
|
|
|
98
170
|
*
|
|
99
171
|
* `data`, `total`, `query` and `onQueryChange` are controlled by the host — the
|
|
100
172
|
* grid renders the page it is given and never fetches on its own (the one
|
|
101
|
-
* exception being {@link
|
|
173
|
+
* exception being {@link TableXProps.fetchEndpoint}, used to page in the rest
|
|
102
174
|
* of the dataset for an export).
|
|
103
175
|
*
|
|
104
176
|
* @example
|
|
@@ -114,13 +186,15 @@ interface NexGridProps<TData> {
|
|
|
114
186
|
* />
|
|
115
187
|
* ```
|
|
116
188
|
*/
|
|
117
|
-
declare function
|
|
189
|
+
declare function TableX<TData>(props: TableXProps<TData>): react.JSX.Element;
|
|
190
|
+
declare const NexGrid: typeof TableX;
|
|
118
191
|
|
|
119
|
-
/** Options for {@link
|
|
120
|
-
interface
|
|
192
|
+
/** Options for {@link useClientTableX}. */
|
|
193
|
+
interface UseClientTableXOptions<TData> extends ClientQueryOptions<TData> {
|
|
121
194
|
/** Optional initial query state overrides. */
|
|
122
195
|
initialQuery?: Partial<QueryState>;
|
|
123
196
|
}
|
|
197
|
+
type UseClientNexGridOptions<TData> = UseClientTableXOptions<TData>;
|
|
124
198
|
/**
|
|
125
199
|
* React hook for effortless in-memory client-side grid operations.
|
|
126
200
|
*
|
|
@@ -130,10 +204,10 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
|
|
|
130
204
|
* @example
|
|
131
205
|
* ```tsx
|
|
132
206
|
* export function StudentsGrid({ allStudents }: { allStudents: Student[] }) {
|
|
133
|
-
* const grid =
|
|
207
|
+
* const grid = useClientTableX(allStudents);
|
|
134
208
|
*
|
|
135
209
|
* return (
|
|
136
|
-
* <
|
|
210
|
+
* <TableX
|
|
137
211
|
* caption="Students"
|
|
138
212
|
* columns={columns}
|
|
139
213
|
* {...grid}
|
|
@@ -142,7 +216,7 @@ interface UseClientNexGridOptions<TData> extends ClientQueryOptions<TData> {
|
|
|
142
216
|
* }
|
|
143
217
|
* ```
|
|
144
218
|
*/
|
|
145
|
-
declare function
|
|
219
|
+
declare function useClientTableX<TData>(allData: readonly TData[], options?: UseClientTableXOptions<TData>): {
|
|
146
220
|
data: TData[];
|
|
147
221
|
total: number;
|
|
148
222
|
query: QueryState;
|
|
@@ -152,5 +226,6 @@ declare function useClientNexGrid<TData>(allData: readonly TData[], options?: Us
|
|
|
152
226
|
totalPages: number;
|
|
153
227
|
setQuery: react.Dispatch<react.SetStateAction<QueryState>>;
|
|
154
228
|
};
|
|
229
|
+
declare const useClientNexGrid: typeof useClientTableX;
|
|
155
230
|
|
|
156
|
-
export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, type UseClientNexGridOptions, useClientNexGrid };
|
|
231
|
+
export { NexGrid, type NexGridNotice, type NexGridNoticeType, type NexGridProps, type NexGridReactColumn, type NexGridTheme, TableX, type TableXNotice, type TableXNoticeType, type TableXProps, type TableXReactColumn, type TableXTheme, type UseClientNexGridOptions, type UseClientTableXOptions, useClientNexGrid, useClientTableX };
|