@gravity-ui/react-data-table 2.1.1 → 2.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
CHANGED
|
@@ -35,7 +35,7 @@ of the sort list. A simple Click sorts the table by this column only. Sorting or
|
|
|
35
35
|
|
|
36
36
|
| Property | Type | Default | Description |
|
|
37
37
|
| :------------------------------------------ | :----------------------------------------- | :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
38
|
-
| displayIndices | `Boolean`
|
|
38
|
+
| displayIndices | `Boolean \| {maxIndex: number}` | `true` | Whether to show row indexes (starting from `startIndex`). When set to an object with maxIndex, it controls the width of the index column based on the specified maximum index value rather than the actual data length |
|
|
39
39
|
| stickyHead | `DataTable.FIXED DataTable.MOVING` | | Enable sticky header in one of two modes. The `DataTable.FIXED` mode is used if the table container is fixed relative to the page. If the page with a container is scrollable, better use `DataTable.MOVING`, but for this your browser needs to support `position: sticky`. Otherwise, sticky header will be completely disabled. |
|
|
40
40
|
| stickyTop | `Number` | | Stick the header at the desired height (in the `DataTable.MOVING` mode). Use it if the scrollable container includes other content apart from the table. If the header fails to stick to the edge of the container, better use exactly positioned spacers so that the table content does not bulge out above the top of the header. |
|
|
41
41
|
| stickyFooter | see stickyHead | | It's similar to `stickyHead` for `footerData` |
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import ReactList from 'react-list';
|
|
3
3
|
import './DataTable.scss';
|
|
4
4
|
import { HeightObserver } from './height-observer';
|
|
5
|
-
import { Column, DataTableProps, HeadPosition, OrderType, Settings, SortedDataItem } from './types';
|
|
5
|
+
import { Column, DataTableProps, DisplayIndicesConfig, HeadPosition, OrderType, Settings, SortedDataItem } from './types';
|
|
6
6
|
import { SlimColumn, getSortedData } from './util';
|
|
7
7
|
interface CustomIcons {
|
|
8
8
|
ICON_ASC: React.ReactNode;
|
|
@@ -27,7 +27,7 @@ export interface TableRowProps<T> {
|
|
|
27
27
|
interface TableHeadProps<T> {
|
|
28
28
|
dataColumns: DataColumns<T>;
|
|
29
29
|
headColumns: HeadColumns<T>;
|
|
30
|
-
displayIndices?: boolean;
|
|
30
|
+
displayIndices?: boolean | DisplayIndicesConfig;
|
|
31
31
|
onSort?: TableProps<T>['onSort'];
|
|
32
32
|
onResize?: TableProps<T>['onResize'];
|
|
33
33
|
onColumnsUpdated?: (widths: number[]) => void;
|
|
@@ -200,7 +200,7 @@ interface CellProps<T> {
|
|
|
200
200
|
footer?: boolean;
|
|
201
201
|
headerData?: boolean;
|
|
202
202
|
}
|
|
203
|
-
type InternalProps<T> = DataTableProps<T> & typeof DataTableView.defaultProps
|
|
203
|
+
type InternalProps<T> = DataTableProps<T> & Omit<typeof DataTableView.defaultProps, 'settings'> & Required<Pick<DataTableProps<T>, 'settings'>>;
|
|
204
204
|
interface DataTableViewState<T> extends SortOrderWithSortColumns {
|
|
205
205
|
indexColumn?: Column<T>;
|
|
206
206
|
settings: ReturnType<typeof DataTableView.calculateSettings>;
|
|
@@ -230,7 +230,7 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
|
|
|
230
230
|
static calculateSettings(nextSettings: Settings): {
|
|
231
231
|
stickyHead: HeadPositionInner;
|
|
232
232
|
stickyFooter: HeadPositionInner;
|
|
233
|
-
displayIndices: boolean;
|
|
233
|
+
displayIndices: boolean | DisplayIndicesConfig;
|
|
234
234
|
stickyTop?: number | "auto" | undefined;
|
|
235
235
|
syncHeadOnResize?: boolean | undefined;
|
|
236
236
|
stickyBottom?: number | "auto" | undefined;
|
|
@@ -253,12 +253,12 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
|
|
|
253
253
|
stripedRows?: boolean | undefined;
|
|
254
254
|
headerMod?: "pre" | "multiline" | undefined;
|
|
255
255
|
};
|
|
256
|
-
static getIndexColumn<T extends HasHeaderFooterIndex>({ startIndex, data, visibleRowIndex, }: InternalProps<T>): Column<T>;
|
|
256
|
+
static getIndexColumn<T extends HasHeaderFooterIndex>({ startIndex, data, visibleRowIndex, settings, }: InternalProps<T>): Column<T>;
|
|
257
257
|
static getDerivedStateFromProps<T extends HasHeaderFooterIndex>(nextProps: InternalProps<T>): {
|
|
258
258
|
settings: {
|
|
259
259
|
stickyHead: HeadPositionInner;
|
|
260
260
|
stickyFooter: HeadPositionInner;
|
|
261
|
-
displayIndices: boolean;
|
|
261
|
+
displayIndices: boolean | DisplayIndicesConfig;
|
|
262
262
|
stickyTop?: number | "auto" | undefined;
|
|
263
263
|
syncHeadOnResize?: boolean | undefined;
|
|
264
264
|
stickyBottom?: number | "auto" | undefined;
|
|
@@ -288,7 +288,7 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
|
|
|
288
288
|
settings: {
|
|
289
289
|
stickyHead: HeadPositionInner;
|
|
290
290
|
stickyFooter: HeadPositionInner;
|
|
291
|
-
displayIndices: boolean;
|
|
291
|
+
displayIndices: boolean | DisplayIndicesConfig;
|
|
292
292
|
stickyTop?: number | "auto" | undefined;
|
|
293
293
|
syncHeadOnResize?: boolean | undefined;
|
|
294
294
|
stickyBottom?: number | "auto" | undefined;
|
|
@@ -318,7 +318,7 @@ declare class DataTableView<T> extends React.Component<DataTableProps<T>, DataTa
|
|
|
318
318
|
settings: {
|
|
319
319
|
stickyHead: HeadPositionInner;
|
|
320
320
|
stickyFooter: HeadPositionInner;
|
|
321
|
-
displayIndices: boolean;
|
|
321
|
+
displayIndices: boolean | DisplayIndicesConfig;
|
|
322
322
|
stickyTop?: number | "auto" | undefined;
|
|
323
323
|
syncHeadOnResize?: boolean | undefined;
|
|
324
324
|
stickyBottom?: number | "auto" | undefined;
|
|
@@ -608,8 +608,10 @@ class DataTableView extends React.Component {
|
|
|
608
608
|
static calculateSettings(nextSettings) {
|
|
609
609
|
return Object.assign(Object.assign(Object.assign({}, DataTableView.defaultProps.settings), nextSettings), { stickyHead: DataTableView.normalizeStickyHead(nextSettings.stickyHead), stickyFooter: DataTableView.normalizeStickyHead(nextSettings.stickyFooter) });
|
|
610
610
|
}
|
|
611
|
-
static getIndexColumn({ startIndex, data, visibleRowIndex, }) {
|
|
612
|
-
const lastIndex =
|
|
611
|
+
static getIndexColumn({ startIndex, data, visibleRowIndex, settings, }) {
|
|
612
|
+
const lastIndex = typeof settings.displayIndices === 'object'
|
|
613
|
+
? settings.displayIndices.maxIndex
|
|
614
|
+
: startIndex + data.length + 1;
|
|
613
615
|
return {
|
|
614
616
|
name: INDEX_COLUMN,
|
|
615
617
|
header: '#',
|
package/build/esm/lib/types.d.ts
CHANGED
|
@@ -67,8 +67,11 @@ export interface Column<T> {
|
|
|
67
67
|
resizeMaxWidth?: number;
|
|
68
68
|
}
|
|
69
69
|
export type DynamicInnerRefT = ReactList;
|
|
70
|
+
export interface DisplayIndicesConfig {
|
|
71
|
+
maxIndex: number;
|
|
72
|
+
}
|
|
70
73
|
export interface Settings {
|
|
71
|
-
displayIndices?: boolean;
|
|
74
|
+
displayIndices?: boolean | DisplayIndicesConfig;
|
|
72
75
|
stickyHead?: HeadPosition;
|
|
73
76
|
stickyTop?: 'auto' | number;
|
|
74
77
|
syncHeadOnResize?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/react-data-table",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "DataTable component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"table"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@gravity-ui/prettier-config": "^1.0.1",
|
|
63
63
|
"@gravity-ui/stylelint-config": "^2.0.0",
|
|
64
64
|
"@gravity-ui/tsconfig": "^1.0.0",
|
|
65
|
-
"@gravity-ui/uikit": "^
|
|
65
|
+
"@gravity-ui/uikit": "^7.0.0 || >=7.0.0-beta.6",
|
|
66
66
|
"@storybook/addon-actions": "^7.3.1",
|
|
67
67
|
"@storybook/addon-essentials": "^7.3.1",
|
|
68
68
|
"@storybook/addon-interactions": "^7.3.1",
|
|
@@ -82,8 +82,8 @@
|
|
|
82
82
|
"postcss": "^8.4.28",
|
|
83
83
|
"prettier": "2.5.1",
|
|
84
84
|
"prop-types": "^15.8.1",
|
|
85
|
-
"react": "
|
|
86
|
-
"react-dom": "
|
|
85
|
+
"react": "^18.3.1",
|
|
86
|
+
"react-dom": "^18.3.1",
|
|
87
87
|
"sass": "1.65",
|
|
88
88
|
"sass-loader": "^13.3.2",
|
|
89
89
|
"simple-git-hooks": "2.9",
|