react-gridix 0.2.3 → 0.2.5
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 +559 -46
- package/dist/client-40__X0_a.cjs +1 -0
- package/dist/client-DUlru6F3.js +51 -0
- package/dist/index.d.ts +331 -9
- package/dist/react-gridix.cjs +21 -2
- package/dist/react-gridix.js +1871 -1106
- package/dist/style.css +1 -1
- package/package.json +10 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const y=require("react-dom");function f(t,e){for(var o=0;o<e.length;o++){const n=e[o];if(typeof n!="string"&&!Array.isArray(n)){for(const a in n)if(a!=="default"&&!(a in t)){const u=Object.getOwnPropertyDescriptor(n,a);u&&Object.defineProperty(t,a,u.get?u:{enumerable:!0,get:()=>n[a]})}}}return Object.freeze(Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}))}var r={},l,s,i=y;if(process.env.NODE_ENV==="production")s=r.createRoot=i.createRoot,l=r.hydrateRoot=i.hydrateRoot;else{var c=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;s=r.createRoot=function(t,e){c.usingClientEntryPoint=!0;try{return i.createRoot(t,e)}finally{c.usingClientEntryPoint=!1}},l=r.hydrateRoot=function(t,e,o){c.usingClientEntryPoint=!0;try{return i.hydrateRoot(t,e,o)}finally{c.usingClientEntryPoint=!1}}}const _=f({__proto__:null,get createRoot(){return s},default:r,get hydrateRoot(){return l}},[r]);exports.client=_;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import f from "react-dom";
|
|
2
|
+
function s(t, e) {
|
|
3
|
+
for (var o = 0; o < e.length; o++) {
|
|
4
|
+
const n = e[o];
|
|
5
|
+
if (typeof n != "string" && !Array.isArray(n)) {
|
|
6
|
+
for (const a in n)
|
|
7
|
+
if (a !== "default" && !(a in t)) {
|
|
8
|
+
const u = Object.getOwnPropertyDescriptor(n, a);
|
|
9
|
+
u && Object.defineProperty(t, a, u.get ? u : {
|
|
10
|
+
enumerable: !0,
|
|
11
|
+
get: () => n[a]
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
|
|
17
|
+
}
|
|
18
|
+
var r = {}, l, y, i = f;
|
|
19
|
+
if (process.env.NODE_ENV === "production")
|
|
20
|
+
y = r.createRoot = i.createRoot, l = r.hydrateRoot = i.hydrateRoot;
|
|
21
|
+
else {
|
|
22
|
+
var c = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
23
|
+
y = r.createRoot = function(t, e) {
|
|
24
|
+
c.usingClientEntryPoint = !0;
|
|
25
|
+
try {
|
|
26
|
+
return i.createRoot(t, e);
|
|
27
|
+
} finally {
|
|
28
|
+
c.usingClientEntryPoint = !1;
|
|
29
|
+
}
|
|
30
|
+
}, l = r.hydrateRoot = function(t, e, o) {
|
|
31
|
+
c.usingClientEntryPoint = !0;
|
|
32
|
+
try {
|
|
33
|
+
return i.hydrateRoot(t, e, o);
|
|
34
|
+
} finally {
|
|
35
|
+
c.usingClientEntryPoint = !1;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
const R = /* @__PURE__ */ s({
|
|
40
|
+
__proto__: null,
|
|
41
|
+
get createRoot() {
|
|
42
|
+
return y;
|
|
43
|
+
},
|
|
44
|
+
default: r,
|
|
45
|
+
get hydrateRoot() {
|
|
46
|
+
return l;
|
|
47
|
+
}
|
|
48
|
+
}, [r]);
|
|
49
|
+
export {
|
|
50
|
+
R as c
|
|
51
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -169,6 +169,16 @@ export declare interface ColumnDef<T = Record<string, any>> {
|
|
|
169
169
|
* Overrides the grid's `filterDebounce`. Use 0 to apply on every keystroke.
|
|
170
170
|
*/
|
|
171
171
|
filterDebounce?: number;
|
|
172
|
+
/**
|
|
173
|
+
* Adds a drop-down at the top of this column's filter popup for choosing how the text is compared:
|
|
174
|
+
* contains, does not contain, equals, not equal, starts with, does not start with, ends with, does not
|
|
175
|
+
* end with. Default false: the column then simply filters with "contains" and shows no drop-down.
|
|
176
|
+
* Pass `true` for all eight, or a list to offer only some, for example `["contains", "equals", "startsWith"]`.
|
|
177
|
+
* Applies to text columns (`filterType` `"text"` or `"exact"`); it has no effect on number, date or select filters.
|
|
178
|
+
*/
|
|
179
|
+
filterOperators?: boolean | TextFilterOperator[];
|
|
180
|
+
/** The comparison that is selected first when `filterOperators` is on. Default `"contains"` (`"equals"` for `filterType: "exact"`). */
|
|
181
|
+
filterOperator?: TextFilterOperator;
|
|
172
182
|
/** A React component drawn instead of the default dot. Receives `{ column, active, open }`. */
|
|
173
183
|
filterIndicator?: ComponentType<FilterIndicatorProps<T>>;
|
|
174
184
|
/** Classes for this column's filter indicator button (Tailwind works). */
|
|
@@ -210,6 +220,8 @@ export declare interface ColumnDef<T = Record<string, any>> {
|
|
|
210
220
|
cellEditor?: ComponentType<CellEditorProps<T>>;
|
|
211
221
|
/** A React component that renders the header label (the filter indicator and sort arrow are still added). */
|
|
212
222
|
headerRenderer?: ComponentType<HeaderRendererProps<T>>;
|
|
223
|
+
/** The sort indicator of this column. Overrides the grid's `sortIndicator`. See {@link DataGridProps.sortIndicator}. */
|
|
224
|
+
sortIndicator?: SortIndicatorSetting<T>;
|
|
213
225
|
/** Classes for the whole column: its header cell and every body cell. Tailwind works. */
|
|
214
226
|
className?: string;
|
|
215
227
|
/** Inline styles for the whole column: its header cell and every body cell. */
|
|
@@ -229,7 +241,7 @@ export declare interface ColumnDef<T = Record<string, any>> {
|
|
|
229
241
|
headerCheckbox?: boolean;
|
|
230
242
|
}
|
|
231
243
|
|
|
232
|
-
export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, rowSelection, selectedRowIds, defaultSelectedRowIds, onSelectionChange, isRowSelectable, sort: sortProp, defaultSort, onSortChange, multiSort, searchable, searchPlaceholder, search: searchProp, onSearchChange, filters: filtersProp, onFiltersChange, pagination, paginationPosition, showToolbar: allowToolbar, showFooter, pageSize: initialPageSize, pageSizeOptions, page: pageProp, onPageChange, onPageSizeChange, serverSide, rowCount, onQueryChange, queryDebounce, filterDebounce, loading: loadingProp, loadingRows, skeletonRow, errorMessage, columnMenu, onColumnVisibilityChange, keyboardNavigation, virtualize, rowHeight, overscan, exportable, apiRef, onRowClick, toolbar, emptyMessage, striped, stripeColors, checkboxVariant, animateRows, rowAnimationClassName, theme, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
|
|
244
|
+
export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, rowSelection, selectedRowIds, defaultSelectedRowIds, onSelectionChange, isRowSelectable, sort: sortProp, defaultSort, onSortChange, multiSort, searchable, searchPlaceholder, search: searchProp, onSearchChange, filters: filtersProp, onFiltersChange, pagination, paginationPosition, showToolbar: allowToolbar, showFooter, pageSize: initialPageSize, pageSizeOptions, page: pageProp, onPageChange, onPageSizeChange, serverSide, rowCount, onQueryChange, queryDebounce, filterDebounce, loading: loadingProp, loadingRows, skeletonRow, errorMessage, columnMenu, onColumnVisibilityChange, keyboardNavigation, virtualize, rowHeight, overscan, exportable, onExportError, apiRef, onRowClick, toolbar, emptyMessage, emptyComponent, sortIndicator, striped, stripeColors, checkboxVariant, animateRows, rowAnimation, rowAnimationDuration, rowAnimationStagger, rowAnimationClassName, rowExitAnimationClassName, theme, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
|
|
233
245
|
|
|
234
246
|
/** Methods you can call from outside by passing a ref as `apiRef`. */
|
|
235
247
|
export declare interface DataGridApi<T = Record<string, any>> {
|
|
@@ -237,6 +249,20 @@ export declare interface DataGridApi<T = Record<string, any>> {
|
|
|
237
249
|
getCsv: (options?: ExportOptions) => string;
|
|
238
250
|
/** Downloads a CSV file (opens the browser's save dialog). */
|
|
239
251
|
exportCsv: (options?: ExportOptions) => void;
|
|
252
|
+
/** Builds the JSON text (an array of objects) without downloading it. */
|
|
253
|
+
getJson: (options?: ExportOptions) => string;
|
|
254
|
+
/** Downloads a `.json` file. */
|
|
255
|
+
exportJson: (options?: ExportOptions) => void;
|
|
256
|
+
/** Builds an Excel (`.xlsx`) file in memory. */
|
|
257
|
+
getXlsx: (options?: ExportOptions) => Promise<Blob>;
|
|
258
|
+
/** Downloads an `.xlsx` file. */
|
|
259
|
+
exportXlsx: (options?: ExportOptions) => Promise<void>;
|
|
260
|
+
/** Builds a PDF in memory. Needs `jspdf` and `jspdf-autotable` (and `html2canvas` for header/footer elements). */
|
|
261
|
+
getPdf: (options?: ExportOptions) => Promise<Blob>;
|
|
262
|
+
/** Downloads a `.pdf` file. */
|
|
263
|
+
exportPdf: (options?: ExportOptions) => Promise<void>;
|
|
264
|
+
/** Exports in the given format: the same as calling the method above for it. */
|
|
265
|
+
exportAs: (format: ExportFormat, options?: ExportOptions) => Promise<void>;
|
|
240
266
|
getSelectedRows: () => T[];
|
|
241
267
|
getSelectedRowIds: () => (string | number)[];
|
|
242
268
|
/** Selects every selectable row that matches the search and filters. */
|
|
@@ -363,22 +389,60 @@ export declare interface DataGridProps<T = Record<string, any>> {
|
|
|
363
389
|
rowHeight?: number;
|
|
364
390
|
/** Extra rows rendered above and below the visible ones when `virtualize` is on. Default 6. */
|
|
365
391
|
overscan?: number;
|
|
366
|
-
/**
|
|
392
|
+
/**
|
|
393
|
+
* Show an export button in the toolbar. `true` gives "Export CSV". Pass an object to set the file name,
|
|
394
|
+
* scope and so on, and `formats: ["csv", "xlsx", "json", "pdf"]` to offer more formats in an "Export" menu. Default false.
|
|
395
|
+
*/
|
|
367
396
|
exportable?: boolean | ExportOptions;
|
|
397
|
+
/** Called when an export fails (for example `jspdf` is not installed). Without it the error is logged to the console. */
|
|
398
|
+
onExportError?: (error: Error, format: ExportFormat) => void;
|
|
368
399
|
/** Pass a ref to call methods such as `exportCsv()` or `getSelectedRows()` from outside. */
|
|
369
400
|
apiRef?: MutableRefObject<DataGridApi<T> | null>;
|
|
370
401
|
onRowClick?: (row: T, rowIndex: number) => void;
|
|
371
402
|
/** Extra content on the right side of the toolbar. */
|
|
372
403
|
toolbar?: ReactNode;
|
|
373
404
|
emptyMessage?: ReactNode;
|
|
405
|
+
/**
|
|
406
|
+
* A component drawn instead of the `emptyMessage` text when there are no rows to show. It receives
|
|
407
|
+
* `{ reason, search, filters, columns, clearAll }`, so it can say "nothing matches" and offer a button
|
|
408
|
+
* that clears the filters. Define it outside render so it keeps its identity.
|
|
409
|
+
*/
|
|
410
|
+
emptyComponent?: ComponentType<EmptyStateProps<T>>;
|
|
411
|
+
/**
|
|
412
|
+
* The arrow shown in sortable headers. `"default"` (the little ▲ ▼ ↕ text arrows), `"arrow"` (a smooth
|
|
413
|
+
* arrow that turns around when the sort changes), or your own component, which receives
|
|
414
|
+
* `{ column, direction, priority }`. A column can override it with its own `sortIndicator`.
|
|
415
|
+
*/
|
|
416
|
+
sortIndicator?: SortIndicatorSetting<T>;
|
|
374
417
|
/** Alternate row shading. Default false. */
|
|
375
418
|
striped?: boolean;
|
|
376
419
|
/** Two colours for the alternating rows, for example `["#ffffff", "#f1f5f9"]`. Implies `striped`. */
|
|
377
420
|
stripeColors?: [string, string];
|
|
378
421
|
/** Checkbox style for `type: "boolean"` columns and the selection column: "button", "tick" or "native" (default). */
|
|
379
422
|
checkboxVariant?: CheckboxVariant;
|
|
380
|
-
/**
|
|
423
|
+
/**
|
|
424
|
+
* Rows animate when they come and go. Default true. Respects "reduce motion".
|
|
425
|
+
* Rows are matched by `getRowId`: a row that stays on screen is left alone while new rows animate in
|
|
426
|
+
* and are added to the list, and a row that goes away animates out where it was.
|
|
427
|
+
*/
|
|
381
428
|
animateRows?: boolean;
|
|
429
|
+
/**
|
|
430
|
+
* Which animation rows use: one name for both directions (`"zoom"`), or `{ enter, exit }` to mix
|
|
431
|
+
* (`{ enter: "slide-right", exit: "fade" }`). See {@link RowAnimationName}. Default `"slide-up"`.
|
|
432
|
+
*/
|
|
433
|
+
rowAnimation?: RowAnimationName | {
|
|
434
|
+
enter?: RowAnimationName;
|
|
435
|
+
exit?: RowAnimationName;
|
|
436
|
+
};
|
|
437
|
+
/** Length of the enter animation in milliseconds (exit takes 80% of it). Default 380. */
|
|
438
|
+
rowAnimationDuration?: number;
|
|
439
|
+
/** Delay between rows that appear together, in milliseconds. Use 0 to start all at once. Default 28. */
|
|
440
|
+
rowAnimationStagger?: number;
|
|
441
|
+
/**
|
|
442
|
+
* Your own CSS class (or function) for the animation of a row that leaves, like `rowAnimationClassName`
|
|
443
|
+
* is for rows that arrive. The class should set `animation` and keep the final state (`forwards`).
|
|
444
|
+
*/
|
|
445
|
+
rowExitAnimationClassName?: string | ((row: T, rowIndex: number) => string);
|
|
382
446
|
/**
|
|
383
447
|
* Your own CSS class (or a function returning one) for the entrance animation of every row. It
|
|
384
448
|
* replaces the built-in slide-up. The class should set `animation`. Each row also has the CSS
|
|
@@ -412,21 +476,59 @@ export declare interface DateRangeFilter {
|
|
|
412
476
|
to?: string;
|
|
413
477
|
}
|
|
414
478
|
|
|
479
|
+
/** Why the grid has no rows to show. */
|
|
480
|
+
export declare type EmptyReason = "no-data" | "no-results";
|
|
481
|
+
|
|
482
|
+
/** Props received by the `emptyComponent`, drawn in place of the "No rows to show" message. */
|
|
483
|
+
export declare interface EmptyStateProps<T = Record<string, any>> {
|
|
484
|
+
/**
|
|
485
|
+
* `"no-data"`: the grid was given no rows at all.
|
|
486
|
+
* `"no-results"`: there are rows, but the search or the filters hide all of them.
|
|
487
|
+
*/
|
|
488
|
+
reason: EmptyReason;
|
|
489
|
+
/** The global search text (empty when none). */
|
|
490
|
+
search: string;
|
|
491
|
+
/** The filters that are active right now, by field. */
|
|
492
|
+
filters: Record<string, FilterValue>;
|
|
493
|
+
/** The columns that are visible. */
|
|
494
|
+
columns: ColumnDef<T>[];
|
|
495
|
+
/** Clears the search box and every filter, which brings the rows back. */
|
|
496
|
+
clearAll: () => void;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
/** The file formats the grid can export. */
|
|
500
|
+
export declare type ExportFormat = "csv" | "xlsx" | "json" | "pdf";
|
|
501
|
+
|
|
415
502
|
export declare interface ExportOptions {
|
|
416
503
|
/** File name without the extension. Default `"export"`. */
|
|
417
504
|
filename?: string;
|
|
418
505
|
/**
|
|
419
506
|
* Which rows to export.
|
|
420
507
|
* - `"filtered"` (default): every row matching the search and filters, across all pages
|
|
421
|
-
* - `"
|
|
422
|
-
* - `"
|
|
508
|
+
* - `"visible"` : the rows you can see now, which is the current page (every matching row when there is no pagination)
|
|
509
|
+
* - `"page"` : same as `"visible"`
|
|
510
|
+
* - `"selected"`: only the selected rows (needs `rowSelection`)
|
|
423
511
|
* With `serverSide`, "filtered" means the rows currently loaded.
|
|
424
512
|
*/
|
|
425
|
-
scope?: "filtered" | "page" | "selected";
|
|
513
|
+
scope?: "filtered" | "visible" | "page" | "selected";
|
|
426
514
|
/** Also export columns the user has hidden. Default false. */
|
|
427
515
|
includeHidden?: boolean;
|
|
428
|
-
/**
|
|
516
|
+
/** CSV only: add an apostrophe in front of text that starts with `= + - @`, so spreadsheets do not run it as a formula. Default true. */
|
|
429
517
|
sanitize?: boolean;
|
|
518
|
+
/**
|
|
519
|
+
* Which formats the toolbar export button offers. One format (the default, `["csv"]`) gives a plain
|
|
520
|
+
* "Export CSV" button; several give an "Export" menu with a format list and, when more than one choice
|
|
521
|
+
* makes sense, a "Visible rows / Selected rows / All matching rows" chooser.
|
|
522
|
+
*/
|
|
523
|
+
formats?: ExportFormat[];
|
|
524
|
+
/** Excel only: name of the worksheet. Default `"Sheet1"`. */
|
|
525
|
+
sheetName?: string;
|
|
526
|
+
/** JSON only: use the column `"field"` (default) or its `"header"` text as the key of each value. */
|
|
527
|
+
jsonKeys?: "field" | "header";
|
|
528
|
+
/** JSON only: spaces of indentation. Default 2; use 0 for one compact line. */
|
|
529
|
+
jsonIndent?: number;
|
|
530
|
+
/** PDF only: header, footer, paper and table settings. */
|
|
531
|
+
pdf?: PdfExportOptions;
|
|
430
532
|
}
|
|
431
533
|
|
|
432
534
|
/**
|
|
@@ -474,7 +576,7 @@ export declare interface FilterRendererProps<T = Record<string, any>> {
|
|
|
474
576
|
export declare type FilterType = "text" | "exact" | "number" | "date" | "select";
|
|
475
577
|
|
|
476
578
|
/** What a column's filter currently holds. The shape depends on the column's `FilterType`. */
|
|
477
|
-
export declare type FilterValue = string | NumberRangeFilter | DateRangeFilter | string[];
|
|
579
|
+
export declare type FilterValue = string | TextFilter | NumberRangeFilter | DateRangeFilter | string[];
|
|
478
580
|
|
|
479
581
|
/**
|
|
480
582
|
* Everything the grid wants from your server in `serverSide` mode. It is sent to `onQueryChange`
|
|
@@ -492,7 +594,7 @@ export declare interface GridQuery {
|
|
|
492
594
|
pageSize: number;
|
|
493
595
|
}
|
|
494
596
|
|
|
495
|
-
export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterIndicator" | "filterPopup" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator" | "toolButton" | "skeleton";
|
|
597
|
+
export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterIndicator" | "filterPopup" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator" | "toolButton" | "exportMenu" | "sortIndicator" | "skeleton";
|
|
496
598
|
|
|
497
599
|
/**
|
|
498
600
|
* Built-in themes. A theme only applies when you pass its name to `<DataGrid theme="..." />`.
|
|
@@ -517,10 +619,174 @@ export declare interface NumberRangeFilter {
|
|
|
517
619
|
|
|
518
620
|
export declare type PaginationPosition = "bottom" | "top" | "both";
|
|
519
621
|
|
|
622
|
+
/** A CSS colour: `"#4f46e5"`, `"#fff"`, `"rgb(79, 70, 229)"`, `"rgba(0,0,0,.5)"` or a name like `"tomato"`. */
|
|
623
|
+
export declare type PdfColor = string;
|
|
624
|
+
|
|
625
|
+
/** Looks of one column in the PDF, by the column's `field` (see `PdfStyle.columns`). */
|
|
626
|
+
export declare interface PdfColumnStyle {
|
|
627
|
+
/** Column width in points, or `"auto"` (default), or `"wrap"` (as narrow as the longest word allows). */
|
|
628
|
+
width?: number | "auto" | "wrap";
|
|
629
|
+
align?: "left" | "center" | "right";
|
|
630
|
+
textColor?: PdfColor;
|
|
631
|
+
backgroundColor?: PdfColor;
|
|
632
|
+
fontStyle?: "normal" | "bold" | "italic" | "bolditalic";
|
|
633
|
+
fontSize?: number;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
/** Options of a PDF export (the `pdf` field of {@link ExportOptions}). */
|
|
637
|
+
export declare interface PdfExportOptions {
|
|
638
|
+
/**
|
|
639
|
+
* Where the PDF libraries come from. Required for PDF export. Give the libraries, or a function that loads
|
|
640
|
+
* them (best: it runs only when someone exports a PDF):
|
|
641
|
+
*
|
|
642
|
+
* libraries: async () => ({
|
|
643
|
+
* jsPDF: (await import("jspdf")).jsPDF,
|
|
644
|
+
* autoTable: (await import("jspdf-autotable")).default,
|
|
645
|
+
* html2canvas: (await import("html2canvas")).default, // only for a header / footer element
|
|
646
|
+
* })
|
|
647
|
+
*/
|
|
648
|
+
libraries?: PdfLibraries | (() => PdfLibraries | Promise<PdfLibraries>);
|
|
649
|
+
/**
|
|
650
|
+
* A heading printed above the table on the first page: a string, or a React element (drawn to a picture
|
|
651
|
+
* like `header` and `footer`, so it needs `html2canvas` in `libraries`).
|
|
652
|
+
*/
|
|
653
|
+
title?: ReactNode;
|
|
654
|
+
/**
|
|
655
|
+
* Printed at the top of every page. A string (tokens `{page}`, `{pages}` and `{date}` are replaced), or a
|
|
656
|
+
* React element such as `<div style={{display:"flex"}}><img src={logo} height={32}/> Sales report</div>`.
|
|
657
|
+
* An element is drawn to an image first (with html2canvas), so styled boxes, colours and images work.
|
|
658
|
+
*/
|
|
659
|
+
header?: ReactNode;
|
|
660
|
+
/** Printed at the bottom of every page. Same rules as `header`. */
|
|
661
|
+
footer?: ReactNode;
|
|
662
|
+
/** Where the header goes horizontally. Default `"left"`. */
|
|
663
|
+
headerAlign?: "left" | "center" | "right";
|
|
664
|
+
/** Where the footer goes horizontally. Default `"center"`. */
|
|
665
|
+
footerAlign?: "left" | "center" | "right";
|
|
666
|
+
/** `"auto"` (default) picks landscape when the table has more than 6 columns. */
|
|
667
|
+
orientation?: "portrait" | "landscape" | "auto";
|
|
668
|
+
/** Paper size. Default `"a4"`. */
|
|
669
|
+
pageSize?: "a3" | "a4" | "a5" | "letter" | "legal";
|
|
670
|
+
/**
|
|
671
|
+
* Space around the page in points (1 pt = 1/72 inch). A number for all four sides, or
|
|
672
|
+
* `{ top, right, bottom, left }` (a missing side uses 36). Default 36.
|
|
673
|
+
*/
|
|
674
|
+
margin?: number | {
|
|
675
|
+
top?: number;
|
|
676
|
+
right?: number;
|
|
677
|
+
bottom?: number;
|
|
678
|
+
left?: number;
|
|
679
|
+
};
|
|
680
|
+
/** Font size of the table text in points. Default 9. */
|
|
681
|
+
fontSize?: number;
|
|
682
|
+
/** Look of the table: `"striped"` (default), `"grid"` or `"plain"`. */
|
|
683
|
+
tableTheme?: "striped" | "grid" | "plain";
|
|
684
|
+
/** Background colour of the table's header row, as a hex string. Default `"#4f46e5"`. Same as `style.headColor`. */
|
|
685
|
+
headColor?: string;
|
|
686
|
+
/** Text colour of the table's header row. Default `"#ffffff"`. Same as `style.headTextColor`. */
|
|
687
|
+
headTextColor?: string;
|
|
688
|
+
/**
|
|
689
|
+
* Copy the look of the grid on screen into the PDF: header colours, the two row stripe colours, text
|
|
690
|
+
* colour, row borders, text size and the grid's background. It reads the real elements, so it follows your
|
|
691
|
+
* theme, Tailwind classes and CSS. Default false (the PDF then uses its own look). Anything you set
|
|
692
|
+
* yourself in `style` or the options above wins over the copied value.
|
|
693
|
+
*/
|
|
694
|
+
matchGridStyle?: boolean;
|
|
695
|
+
/** Colours, borders, padding and more for the table and the page. See {@link PdfStyle}. */
|
|
696
|
+
style?: PdfStyle;
|
|
697
|
+
/**
|
|
698
|
+
* Extra options for jspdf-autotable, merged in last so they override everything above. For anything this
|
|
699
|
+
* list does not cover: `{ rowPageBreak: "avoid", didParseCell: (data) => { ... } }`.
|
|
700
|
+
*/
|
|
701
|
+
autoTableOptions?: Record<string, any>;
|
|
702
|
+
/** Print "Page 1 of 3" in the bottom right corner. Default true. */
|
|
703
|
+
pageNumbers?: boolean;
|
|
704
|
+
/** Tallest a header or footer image may be, in points. Default 90. */
|
|
705
|
+
maxImageHeight?: number;
|
|
706
|
+
/**
|
|
707
|
+
* Name of a font you registered with jsPDF (`doc.addFileToVFS` / `doc.addFont`) in `beforeRender`.
|
|
708
|
+
* jsPDF's built-in fonts only cover Western European letters, so register one for other alphabets.
|
|
709
|
+
*/
|
|
710
|
+
fontName?: string;
|
|
711
|
+
/** Called with the jsPDF document before anything is drawn, so you can register fonts or set document properties. */
|
|
712
|
+
beforeRender?: (doc: any) => void | Promise<void>;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
/**
|
|
716
|
+
* The PDF libraries, handed to the grid by your app (see `PdfExportOptions.libraries`). The grid does not
|
|
717
|
+
* import them itself, so apps that never export a PDF need not install them.
|
|
718
|
+
*/
|
|
719
|
+
export declare interface PdfLibraries {
|
|
720
|
+
/** The `jsPDF` class from `jspdf`. */
|
|
721
|
+
jsPDF: any;
|
|
722
|
+
/** The `autoTable` function from `jspdf-autotable` (its default export). */
|
|
723
|
+
autoTable: any;
|
|
724
|
+
/** The `html2canvas` function. Only needed when the header or footer is a React element. */
|
|
725
|
+
html2canvas?: any;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
/** Padding inside table cells, in points: one number, or one per side. */
|
|
729
|
+
export declare type PdfPadding = number | {
|
|
730
|
+
top?: number;
|
|
731
|
+
right?: number;
|
|
732
|
+
bottom?: number;
|
|
733
|
+
left?: number;
|
|
734
|
+
};
|
|
735
|
+
|
|
736
|
+
/** How the PDF's table and page look. Every field is optional. */
|
|
737
|
+
export declare interface PdfStyle {
|
|
738
|
+
/** Header row background. Default `"#4f46e5"`. */
|
|
739
|
+
headColor?: PdfColor;
|
|
740
|
+
/** Header row text colour. Default white. */
|
|
741
|
+
headTextColor?: PdfColor;
|
|
742
|
+
/** Header row text size in points. Default: the table's `fontSize`. */
|
|
743
|
+
headFontSize?: number;
|
|
744
|
+
/** Header row font style. Default `"bold"`. */
|
|
745
|
+
headFontStyle?: "normal" | "bold" | "italic" | "bolditalic";
|
|
746
|
+
/** Background of body rows (when no `stripeColors`). Default: none (white page). */
|
|
747
|
+
bodyColor?: PdfColor;
|
|
748
|
+
/** Text colour of body rows. */
|
|
749
|
+
bodyTextColor?: PdfColor;
|
|
750
|
+
/** The two colours rows alternate between, starting with the first: `["#ffffff", "#f1f5f9"]`. */
|
|
751
|
+
stripeColors?: [PdfColor, PdfColor];
|
|
752
|
+
/** Colour of the lines between cells. */
|
|
753
|
+
borderColor?: PdfColor;
|
|
754
|
+
/** Thickness of those lines in points (0.5 is thin). Default: the table theme's. */
|
|
755
|
+
borderWidth?: number;
|
|
756
|
+
/** Space inside each cell, in points. Default 4. */
|
|
757
|
+
cellPadding?: PdfPadding;
|
|
758
|
+
/** Smallest height of a row in points. */
|
|
759
|
+
minRowHeight?: number;
|
|
760
|
+
/** Table text size in points. Default 9 (the `fontSize` option does the same). */
|
|
761
|
+
fontSize?: number;
|
|
762
|
+
/** Font registered with jsPDF (the `fontName` option does the same). */
|
|
763
|
+
fontName?: string;
|
|
764
|
+
/** Colour behind everything on every page, for example `"#0f172a"`. Default: white paper. Text colours adapt when it is dark. */
|
|
765
|
+
pageBackground?: PdfColor;
|
|
766
|
+
/** Colour of the header, footer and page-number text. Default grey, or light on a dark `pageBackground`. */
|
|
767
|
+
textColor?: PdfColor;
|
|
768
|
+
/** Colour of the `title`. Default near black, or light on a dark `pageBackground`. */
|
|
769
|
+
titleColor?: PdfColor;
|
|
770
|
+
/** Size of the `title` in points. Default 14. */
|
|
771
|
+
titleSize?: number;
|
|
772
|
+
/** Margins of the page (the `margin` option does the same). */
|
|
773
|
+
margin?: PdfExportOptions["margin"];
|
|
774
|
+
/** Per column, by the column's `field`: width, alignment, colours, font. */
|
|
775
|
+
columns?: Record<string, PdfColumnStyle>;
|
|
776
|
+
}
|
|
777
|
+
|
|
520
778
|
declare type Prev = [never, 0, 1, 2, 3, 4, 5];
|
|
521
779
|
|
|
522
780
|
declare type Primitive = string | number | boolean | bigint | symbol | null | undefined | Date | ((...args: any[]) => any);
|
|
523
781
|
|
|
782
|
+
/**
|
|
783
|
+
* Entrance / exit animations a row can use. Every name has an "in" version (a row appears) and an
|
|
784
|
+
* "out" version (a row leaves).
|
|
785
|
+
* `"fade"`, `"slide-up"`, `"slide-down"`, `"slide-left"`, `"slide-right"`, `"zoom"`, `"flip-x"`, `"flip-y"`,
|
|
786
|
+
* `"rotate"`, `"skew"`, `"blur"`, `"bounce"` and `"none"`.
|
|
787
|
+
*/
|
|
788
|
+
export declare type RowAnimationName = "fade" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "zoom" | "flip-x" | "flip-y" | "rotate" | "skew" | "blur" | "bounce" | "none";
|
|
789
|
+
|
|
524
790
|
/** The selected rows. `rows` only holds rows that are loaded in the grid right now (matters with `serverSide`). */
|
|
525
791
|
export declare interface RowSelection<T> {
|
|
526
792
|
ids: (string | number)[];
|
|
@@ -538,12 +804,68 @@ export declare interface SkeletonRowProps<T = Record<string, any>> {
|
|
|
538
804
|
columns: ColumnDef<T>[];
|
|
539
805
|
}
|
|
540
806
|
|
|
807
|
+
/**
|
|
808
|
+
* An arrow that turns around smoothly when the sort changes.
|
|
809
|
+
*
|
|
810
|
+
* Ascending points up, descending points down, and "not sorted" is a dim up arrow. The arrow always
|
|
811
|
+
* keeps turning the same way (up -> down -> back up) instead of spinning backwards, so the movement
|
|
812
|
+
* reads as one continuous half-turn per click. Use it in a column with `sortIndicator="arrow"`, or put
|
|
813
|
+
* it inside your own `sortIndicator` component:
|
|
814
|
+
*
|
|
815
|
+
* const MyIndicator = ({ direction }) => <SortArrow direction={direction} size={16} />;
|
|
816
|
+
*
|
|
817
|
+
* The turn is a CSS transition (`--rg-sort-turn`, default 0.28s) and is switched off for people who
|
|
818
|
+
* prefer reduced motion.
|
|
819
|
+
*/
|
|
820
|
+
export declare function SortArrow({ direction, size, priority, className, style }: SortArrowProps): JSX_2.Element;
|
|
821
|
+
|
|
822
|
+
export declare interface SortArrowProps {
|
|
823
|
+
/** Direction the column is sorted in, or null when it is not sorted. */
|
|
824
|
+
direction: SortDirection | null;
|
|
825
|
+
/** Size of the arrow in pixels. Default 14. */
|
|
826
|
+
size?: number;
|
|
827
|
+
/** Position of the column in a multi-column sort. Shown as a small number next to the arrow. */
|
|
828
|
+
priority?: number;
|
|
829
|
+
className?: string;
|
|
830
|
+
style?: CSSProperties;
|
|
831
|
+
}
|
|
832
|
+
|
|
541
833
|
export declare type SortDirection = "asc" | "desc";
|
|
542
834
|
|
|
835
|
+
/** Props received by a `sortIndicator` component: the little arrow next to a sortable header's name. */
|
|
836
|
+
export declare interface SortIndicatorProps<T = Record<string, any>> {
|
|
837
|
+
column: ColumnDef<T>;
|
|
838
|
+
/** Direction this column is sorted in, or null when it is not sorted. */
|
|
839
|
+
direction: SortDirection | null;
|
|
840
|
+
/** Position of this column in a multi-column sort (1, 2, ...), or undefined when only one column is sorted. */
|
|
841
|
+
priority?: number;
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
/** What can be given as a `sortIndicator`: a built-in name or your own component. */
|
|
845
|
+
export declare type SortIndicatorSetting<T = Record<string, any>> = "default" | "arrow" | ComponentType<SortIndicatorProps<T>>;
|
|
846
|
+
|
|
543
847
|
/** One sorted column. The grid keeps a list of these (more than one only with `multiSort`). */
|
|
544
848
|
export declare interface SortModel {
|
|
545
849
|
field: string;
|
|
546
850
|
direction: SortDirection;
|
|
547
851
|
}
|
|
548
852
|
|
|
853
|
+
/**
|
|
854
|
+
* Value of a text filter whose column has `filterOperators` switched on: the chosen comparison plus the
|
|
855
|
+
* typed text. (Without `filterOperators` a text filter is just the string.)
|
|
856
|
+
*/
|
|
857
|
+
export declare interface TextFilter {
|
|
858
|
+
operator: TextFilterOperator;
|
|
859
|
+
value: string;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
/**
|
|
863
|
+
* How a text filter compares the typed text with the cell's displayed text (ignoring case):
|
|
864
|
+
* - `"contains"` / `"notContains"` : the text appears anywhere in the cell (or does not)
|
|
865
|
+
* - `"equals"` / `"notEquals"` : the whole cell is the text (or is not)
|
|
866
|
+
* - `"startsWith"` / `"notStartsWith"` : the cell begins with the text (or does not)
|
|
867
|
+
* - `"endsWith"` / `"notEndsWith"` : the cell ends with the text (or does not)
|
|
868
|
+
*/
|
|
869
|
+
export declare type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith";
|
|
870
|
+
|
|
549
871
|
export { }
|