@talend/react-datagrid NPM | npm.io

12.2.4 • Published 2 years ago

Install

Weekly downloads

1,392

License

Apache-2.0

Repository

Last release

2 years ago

Talend Datagrid

This library provide a datagrid to show some datas !

Guidelines

Basic usage

yarn add @talend/react-datagrid

import DataGrid from '@talend/react-datagrid';

Component

The dataGrid component is used to show datagrid on all Talend projects. This library uses Ag-Grid to show the grid. Grid is composed like this :

colDef0.headerComponent	colDef1.headerComponent	colDef2.headerComponent
raw ag-grid renderer	colDef1.cellRenderer	colDef2.cellRenderer
raw ag-grid renderer	colDef1.cellRenderer	colDef2.cellRenderer
raw ag-grid renderer	colDef1.cellRenderer	colDef2.cellRenderer
raw ag-grid renderer	colDef1.cellRenderer	colDef2.cellRenderer

Data sources

A serializer is provided to handle dataset sample format:

import { DatasetSerializer } from '@talend/react-datagrid`;
const columnDefs = DatasetSerializer.getColumnDefs(sample);

Props

All ag-grid props can be provided (https://www.ag-grid.com/react-data-grid/grid-options/). Here are the main ones:

property	description	type	default
headerHeight	height of the header	int	69
onCellFocused	callback when one cell is focused	function
rowSelection	set the type of selection (single or multiple)	string	single
rowData	pass the row data straight right to ag-grid	Array
columnsDef	definition of the columns	Array
getRowId	return row identifier, used when updating rows	function

To support new use cases, new props were added:

property	description	type	default
columnSelection	set the type of selection (single or multiple)	string	single
onColumnSelectionChanged	callback selected column(s) changed	function
loading		boolean	false
selection	controlled selection	{ rowIndexes, columnIds }
sizesLocalStorageKey	Key to use when persisting sizes to local storage	string
onVerticalScroll	callback when the grid scroll vertical	function

Issue solved with ag-grid

It is a list of issues encountered with ag-grid that DataGrid resolved.

Active Column.

By default, ag-grid doesn't manage a style when the column is active. DataGrid listens some events from ag-grid to add the class .column-focus on all cells and header on the current column. The component HeaderCell is enhanced by a method onFocusedColumn to detect when the user change of the column.

Current Row selected

Ag-grid sets the current cell selected by a click. If we navigate with the keyboard, ag-grid sends a new event onCellFocused but the cell isn't selected. AgGrid allows to change this behavior by adding a method navigateToNextCell on these options. Each time that we move to a next cell, this cell is selected. The current selected rows is highlighted by the class .ag-row-focus. This class can be overridden by the class .ag-row-selected if many row are selected.

react talend datagrid

@talend/assets-api @talend/design-tokens @talend/icons ag-grid-community ag-grid-react @talend/react-components classnames focus-trap-react lodash

@infinitebrahmanuniverse/nolb-_tal @everything-registry/sub-chunk-893 @zalastax/nolb-_tal

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

5.28.1-6.0.0-ds.0.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

6.0.0-ds-alpha.3

3 years ago

4 years ago

4 years ago

6.0.0-ds-alpha.2

4 years ago

6.0.0-ds-alpha.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

3.9.1-3.10.0-alpha.0.0

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

1.10.0-1.10.0-2.0

5 years ago

5 years ago

1.10.0-webpack4

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

0.207.1-0.208.0-tacokit-0.0

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

0.201.1-tacokit-0

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

0.200.1-tacokit-1

6 years ago

6 years ago

6 years ago

0.199.0-tacokit-1

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

0.198.0-tacokit-7

6 years ago

6 years ago

0.198.0-tacokit-6

6 years ago

0.198.0-tacokit-5

6 years ago

0.198.0-tacokit-4

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago