6.37.0 • Published 25 days ago

@talend/react-datagrid v6.37.0

Weekly downloads
1,392
License
Apache-2.0
Repository
github
Last release
25 days ago

Talend Datagrid

This library provide a datagrid to show some datas !

Guidelines

Datagrid

Basic usage

yarn add @talend/react-datagrid
import DataGrid from '@talend/react-datagrid'; //use the DataGrid Container

Using CMF

import cmf from '@talend/react-cmf';
import datagridModule from '@talend/react-datagrid/lib/cmfModule';

cmf.bootstrap({
	modules: [datagridModule],
});

DataGrid Component

The dataGrid component used to show datagrid on all talend projects. This library uses Ag-Grid to show the grid. It's an enhanced Ag-Grid.

Features:

  • Virtualized rows/columns
  • Drag & Drop columns
  • Custom Cell
  • Custom Avro Renderer
  • Custom Header/Pin Header
  • Row selection keyboard/mouse

The DataGrid componnent provides 3 default renderers provides by Inject, it can be overrided to show anything:

  • defaultHeaderRenderer
  • defaultPinHeaderRenderer
  • defaultCellRenderer

The grid is composed like this :

PinHeaderRendererheaderRendererheaderRenderer
raw ag-grid rendererCellRenderercellRenderer
raw ag-grid rendererCellRenderercellRenderer
raw ag-grid rendererCellRenderercellRenderer
raw ag-grid rendererCellRenderercellRenderer

The cellRenderer has :

  • QualityIndicator
  • AvroRenderer, the avro renderer handles this types with one renderer to each:
    • IntCellRenderer: Renderer for the avro type int
    • StringCellRenderer: Renderer for avro the type string

Concept

In entry, the datagrid component waits a sample of dataset. By default, the datagrid component provides a serializer to transform the data like aggrid waiting in entry.

The format is like this.

Props

propertydescriptiontypedefault
avroRendererlist of components to inject to the avro rendererobject
columnsConfoptions pass to getColumnDefsFn. hideSubType(boolean) : hide the subtitle in the header hideobject{ hideSubType : false }
cellRenderercell component to injectstringDefaultCellRenderer
forceRedrawRows - deprecatedfunction called when the component updated to know if ag-grid have to redraw the grid . should return true or falsefunctionnull
getComponentmethod to provide the injected componentsfunctioncellRenderer
getPinnedColumnDefsFnmethod to provide the definition of the pinned columnsfunctiondataset serializer
getColumnDefsFnmethod to provide the definition of the columnsfunctiondataset serializer
getRowDataFnmethod to provide the row datafunctiondataset serializer
getValueByCellFnmethod to provide the data by row/columnfunctiondataset serializer
headerHeightheight of the headerint69
headerRendererheader component to injectstringDefaultHeaderRenderer
onFocusedCellcallback when one cell is focusedfunction
onFocusedColumncallback when one column is focusedfunction
onVerticalScrollcallback when the grid scroll verticalfunction
pinHeaderRendererpinHeader component to injectstringDefaultPinHeaderRenderer
datadata to set into the datagridArray
rowDatapass the row data straight right to ag-gridArraysingle
rowHeightheight of the rowint39
rowSelectionset the type of selection (single or multiple)stringsingle

Avro renderers

propertydescriptiontypedefault
booleanCellRendererrenderer for the boolean renderer to injectstringDefaultBooleanCellRenderer
dateCellRendererrenderer for the date renderer to injectstringDefaultDateCellRenderer
intCellRendererrenderer for the int renderer to injectstringDefaultIntCellRenderer
stringCellRendererrenderer for the string renderer to injectstringDefaultStringCellRenderer

Containers DataGrid

The container DataGrid

  • connect the component DataGrid with the CMF settings
  • spread the data from the redux store and the CMF settings
  • dispatch the event by actioncreators.

API

propertydescriptiontypedefault
sourceDatapath of the collections in CMF store to loadstring
actionCreatorsobject of actionsCreatorsobject
actionsCreators.onFocusedColumnaction creator triggers when one column is focusedstring
actionsCreators.onFocusedCellaction creator triggers when one cell is focusedstringDefaultStringCellRenderer

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.

Ag-Grid Events to update the active column style:

  • onCellFocused: trigger when the user select a new cell.
  • onViewportChanged: triggers when a new virtualized row is added, removed.
  • onVirtualColumnsChanged: triggers when a new virtualized column is added, removed.
  • click on the header updates the current cell to the selected column.

Workaround Active Column

To create this feature, we used a bad pratice by manipulating straight the DOM. But we don't have the choice if we want to highlight the column. We have to access to the wrapper element of the cell and header. There is a issue on ag-grid to request a feature..

See the code in the method removeFocusColumn and updateStyleFocusColumn.

Current Row selected

Ag-grid set the current cell selected by a click. If we naviguate with the keyboard, ag-grid sent a new event onCellFocused but the cell isn't selected. AgGrid allows to change this behavior by adding a method navigateToNextCell on theses options. Each times that we move to a next cell, this cell is selected. The current selected rows is hightlight by the class .ag-row-focus. This class can be overrided by the class .ag-row-selected is many row is selected.

Ag-Grid Configuration

global configuration

  • suppressDragLeaveHidesColumns: Set to false to avoid, by default, ag-grid deletes a column when we drag an column outside the grid.

Columns definition

  • lockPosition: Set to true on the pinned column to avoid to drag a no pinned column before the pinned columns
  • lockPinned: Set to true on no pinned column to prevent when we drag a column to set it like to a pinned column

Ag-Grid Performance

ag-grid tips

Although that Ag-Grid recommands to avoid to use custom cell renderer to renderer the cell, we used because a cell can't have only text but many elements on this: quality indicator, comments, invisible chars, ...

This choice creates a issue when we quickly scroll, by the mouse, the scrollbar. With the scroll whell, the performance is acceptable.

For IE11, we use Graceful Degradation.

6.37.0

25 days ago

6.36.5

2 months ago

6.36.4

3 months ago

6.36.3

4 months ago

6.36.2

4 months ago

6.36.1

4 months ago

6.36.0

5 months ago

6.35.0

6 months ago

6.34.0

6 months ago

6.33.0

6 months ago

6.32.0

7 months ago

6.31.0

7 months ago

6.30.0

7 months ago

6.29.0

7 months ago

6.28.0

8 months ago

6.27.0

8 months ago

6.26.0

8 months ago

6.25.0

8 months ago

6.24.0

8 months ago

6.24.1

8 months ago

6.23.0

9 months ago

6.22.0

9 months ago

6.21.0

9 months ago

6.20.0

9 months ago

6.19.0

9 months ago

6.18.0

10 months ago

6.17.0

10 months ago

6.16.0

10 months ago

6.15.1

10 months ago

6.15.0

11 months ago

6.14.2

11 months ago

6.14.1

11 months ago

6.14.0

11 months ago

7.0.0-alpha.1

11 months ago

6.13.0

11 months ago

6.12.0

11 months ago

6.11.1

12 months ago

6.12.0-alpha.0

12 months ago

6.11.0

12 months ago

6.10.1

12 months ago

6.10.0

12 months ago

6.9.1

12 months ago

6.9.0

12 months ago

6.8.0

1 year ago

6.7.0

1 year ago

6.6.0

1 year ago

6.5.1

1 year ago

6.5.0

1 year ago

6.4.0

1 year ago

6.3.1

1 year ago

6.3.0

1 year ago

6.2.4

1 year ago

6.2.3

1 year ago

6.2.1

1 year ago

6.2.0

1 year ago

6.2.2

1 year ago

6.1.8

1 year ago

5.31.0

1 year ago

6.1.7

1 year ago

5.30.3

1 year ago

5.30.2

1 year ago

6.1.6

1 year ago

6.1.5

1 year ago

6.1.4

1 year ago

5.30.1

1 year ago

6.1.2

1 year ago

6.1.3

1 year ago

6.1.0

1 year ago

6.1.1

1 year ago

5.30.0

1 year ago

6.0.1

1 year ago

6.0.0

1 year ago

5.29.4

1 year ago

5.29.3

1 year ago

5.29.2

1 year ago

5.29.1

1 year ago

5.29.0

1 year ago

5.28.1-alpha.0

1 year ago

6.0.0-ds.0

1 year ago

5.29.0-alpha.0

1 year ago

5.28.0

1 year ago

5.27.1

1 year ago

5.27.0

1 year ago

6.0.0-alpha.43

1 year ago

6.0.0-alpha.42

1 year ago

6.0.0-alpha.41

1 year ago

6.0.0-alpha.40

1 year ago

5.26.0

1 year ago

6.0.0-alpha.39

1 year ago

6.0.0-alpha.38

1 year ago

6.0.0-alpha.37

1 year ago

6.0.0-alpha.36

1 year ago

6.0.0-alpha.35

1 year ago

6.0.0-alpha.34

1 year ago

6.0.0-alpha.29

1 year ago

6.0.0-alpha.30

1 year ago

6.0.0-alpha.31

1 year ago

6.0.0-alpha.32

1 year ago

6.0.0-alpha.33

1 year ago

5.25.0

1 year ago

6.0.0-alpha.28

1 year ago

6.0.0-alpha.24

1 year ago

6.0.0-alpha.25

1 year ago

6.0.0-alpha.26

1 year ago

6.0.0-alpha.27

1 year ago

6.0.0-alpha.21

1 year ago

6.0.0-alpha.22

1 year ago

6.0.0-alpha.23

1 year ago

6.0.0-y.0

1 year ago

6.0.0-alpha.20

1 year ago

6.0.0-alpha.19

1 year ago

5.24.0

1 year ago

6.0.0-alpha.18

1 year ago

6.0.0-alpha.17

1 year ago

5.23.0

1 year ago

6.0.0-alpha.16

1 year ago

6.0.0-alpha.15

1 year ago

6.0.0-alpha.14

1 year ago

6.0.0-alpha.13

1 year ago

5.22.1

1 year ago

5.22.0

1 year ago

5.21.0

1 year ago

6.0.0-alpha.12

1 year ago

6.0.0-alpha.11

1 year ago

5.20.0

1 year ago

5.20.0-alpha.0

1 year ago

5.19.0

1 year ago

5.18.0

1 year ago

5.17.0

1 year ago

5.16.0

1 year ago

5.15.0

1 year ago

5.14.0

1 year ago

5.14.0-alpha.0

1 year ago

5.13.0

1 year ago

5.12.0

2 years ago

5.11.0

2 years ago

6.0.0-alpha.10

2 years ago

6.0.0-alpha.9

2 years ago

5.10.3

2 years ago

5.9.2

2 years ago

5.7.2

2 years ago

6.0.0-alpha.8

2 years ago

5.9.1

2 years ago

5.10.2

2 years ago

6.0.0-alpha.7

2 years ago

5.10.1

2 years ago

5.10.0

2 years ago

5.7.1

2 years ago

6.0.0-alpha.4

2 years ago

6.0.0-alpha.5

2 years ago

6.0.0-alpha.6

2 years ago

6.0.0-alpha.3

2 years ago

6.0.0-alpha.2

2 years ago

6.0.0-alpha.1

2 years ago

6.0.0-alpha.0

2 years ago

5.9.0

2 years ago

5.8.0

2 years ago

5.7.0

2 years ago

5.6.0

2 years ago

5.1.3

2 years ago

5.5.0

2 years ago

5.5.0-alpha.0

2 years ago

5.4.0

2 years ago

5.3.0

2 years ago

4.38.2

2 years ago

4.38.1

2 years ago

4.38.0

2 years ago

5.2.0

2 years ago

5.2.0-y.4

2 years ago

5.2.0-y.1

2 years ago

5.1.2

2 years ago

5.2.0-y.0

2 years ago

4.37.1

2 years ago

5.1.2-alpha.2

2 years ago

5.1.1

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.37.0

2 years ago

4.36.3

2 years ago

4.36.2

2 years ago

4.36.1

2 years ago

4.36.0

2 years ago

4.35.0

2 years ago

4.34.1

2 years ago

4.34.0

2 years ago

4.32.2

2 years ago

4.33.0

2 years ago

4.32.1

2 years ago

4.32.0

2 years ago

4.32.0-0

2 years ago

4.31.0

2 years ago

4.30.0

2 years ago

4.29.0

2 years ago

4.28.1

2 years ago

4.28.0

2 years ago

4.27.0

2 years ago

4.26.0

2 years ago

4.26.1

2 years ago

4.26.2

2 years ago

4.25.0

2 years ago

4.25.0-0

2 years ago

4.24.0

2 years ago

4.23.0

2 years ago

4.23.0-0

2 years ago

4.21.1

2 years ago

4.22.0

2 years ago

4.21.0

2 years ago

4.19.1

2 years ago

4.20.0

2 years ago

4.19.0

2 years ago

4.19.0-1

2 years ago

4.19.0-0

2 years ago

4.18.0

2 years ago

4.17.0

2 years ago

4.16.0

2 years ago

4.15.0

2 years ago

4.14.0

2 years ago

4.14.0-1

2 years ago

4.14.0-0

2 years ago

4.13.0

2 years ago

4.13.0-1

2 years ago

4.10.3

2 years ago

4.13.0-0

2 years ago

4.12.0

2 years ago

4.11.0

2 years ago

4.10.2

2 years ago

4.10.1

2 years ago

4.10.0

2 years ago

4.9.0

2 years ago

4.8.2

2 years ago

4.9.0-2

2 years ago

4.9.0-1

2 years ago

4.9.0-0

2 years ago

4.8.1

2 years ago

4.8.0

2 years ago

4.7.0

2 years ago

4.7.0-1

2 years ago

4.7.0-0

2 years ago

4.6.0

2 years ago

4.5.0

2 years ago

4.4.0

2 years ago

4.3.0

2 years ago

4.2.0

2 years ago

4.1.1

2 years ago

4.1.0

3 years ago

4.0.1

3 years ago

3.9.12

3 years ago

3.12.1

3 years ago

3.9.11

3 years ago

4.0.0

3 years ago

3.12.0

3 years ago

3.9.10

3 years ago

3.9.9

3 years ago

3.9.8

3 years ago

3.11.0

3 years ago

3.9.7

3 years ago

3.9.6

3 years ago

3.8.4

3 years ago

3.8.3

3 years ago

3.8.2

3 years ago

3.9.5

3 years ago

3.10.0

3 years ago

3.9.4

3 years ago

3.9.3

3 years ago

3.9.2

3 years ago

3.9.1

3 years ago

3.10.0-alpha.0

3 years ago

3.9.0

3 years ago

3.8.1

3 years ago

3.8.0

3 years ago

3.8.0-1

3 years ago

3.7.2

3 years ago

3.6.3

3 years ago

3.7.1

3 years ago

3.6.2

3 years ago

3.8.0-0

3 years ago

3.7.0

3 years ago

3.7.0-0

3 years ago

3.6.1

3 years ago

3.6.0

3 years ago

3.6.0-1

3 years ago

3.6.0-0

3 years ago

3.5.0

3 years ago

3.4.0

3 years ago

2.6.19

3 years ago

3.4.0-0

3 years ago

3.3.0

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.1.0

3 years ago

2.12.2

3 years ago

3.0.0

3 years ago

2.12.1

3 years ago

2.12.0

3 years ago

2.6.18

3 years ago

2.11.0

3 years ago

2.6.17

3 years ago

2.6.16

3 years ago

2.6.15

3 years ago

2.10.0

3 years ago

2.6.14

3 years ago

2.6.13

3 years ago

2.6.12

3 years ago

2.6.11

3 years ago

2.9.0

3 years ago

2.6.10

3 years ago

2.6.9

3 years ago

2.8.0

3 years ago

2.6.8

3 years ago

2.6.7

3 years ago

2.6.6

3 years ago

2.6.5

3 years ago

2.6.4

3 years ago

2.7.0

3 years ago

2.6.3

3 years ago

2.6.2

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.5.1-0

3 years ago

2.5.0

3 years ago

2.5.0-1

3 years ago

2.4.1

3 years ago

2.5.0-0

3 years ago

2.4.0

3 years ago

2.4.0-0

3 years ago

2.3.1

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.2.0-0

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.13.0

3 years ago

1.12.0

3 years ago

1.12.0-1

3 years ago

1.12.0-0

3 years ago

1.11.0

3 years ago

1.10.1

3 years ago

1.10.0-webpack4

3 years ago

1.10.0

3 years ago

1.10.0-1

3 years ago

1.9.1

3 years ago

1.10.0-0

3 years ago

1.9.0

3 years ago

2.0.0-0

3 years ago

1.9.0-1

3 years ago

1.9.0-0

3 years ago

1.8.0

3 years ago

1.7.0

3 years ago

1.6.3

3 years ago

1.6.2

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.4.0-0

3 years ago

1.3.0

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.0

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.211.0-0

3 years ago

0.210.2

3 years ago

0.210.1

3 years ago

0.210.0

3 years ago

0.210.0-0

3 years ago

0.209.0

3 years ago

0.208.1-0

3 years ago

0.197.1-tdp

3 years ago

0.208.0

3 years ago

0.207.1

3 years ago

0.207.0

3 years ago

0.206.0

3 years ago

0.206.0-2

3 years ago

0.206.0-1

3 years ago

0.206.0-0

3 years ago

0.205.0

3 years ago

0.205.0-0

3 years ago

0.204.1

3 years ago

0.204.0

3 years ago

0.203.1

3 years ago

0.203.0

3 years ago

0.202.0

3 years ago

0.201.1

3 years ago

0.201.0

3 years ago

0.201.0-2

3 years ago

0.201.0-1

3 years ago

0.201.0-0

4 years ago

0.200.2

4 years ago

0.200.1

4 years ago

0.200.0

4 years ago

0.200.0-0

4 years ago

0.199.0

4 years ago

0.198.3

4 years ago

0.198.2

4 years ago

0.198.1

4 years ago

0.198.0

4 years ago

0.197.0

4 years ago

0.196.0

4 years ago

0.195.0

4 years ago

0.194.0

4 years ago

0.193.0

4 years ago

0.192.0

4 years ago

0.191.0

4 years ago

0.190.0

4 years ago

0.189.0

4 years ago

0.188.0

4 years ago

0.187.1

4 years ago

0.187.0

4 years ago

0.186.0

4 years ago

0.185.0

4 years ago

0.184.0

4 years ago

0.183.0

4 years ago

0.182.0

4 years ago

0.181.0

4 years ago

0.180.0

4 years ago

0.179.0

4 years ago

0.178.0

4 years ago

0.177.0

4 years ago

0.176.0

4 years ago

0.175.0

4 years ago

0.174.0

4 years ago

0.173.0

4 years ago

0.172.0

4 years ago

0.171.0

4 years ago

0.170.0

4 years ago

0.169.0

4 years ago

0.168.0

4 years ago

0.167.0

4 years ago

0.166.0

4 years ago

0.165.0

4 years ago

0.164.0

4 years ago

0.163.1

4 years ago

0.163.0

4 years ago

0.162.0

4 years ago

0.161.0

4 years ago

0.160.0

4 years ago