<ReactDataGrid /> that you can use:$ npm install @inovua/reactdatagrid-community --save$ npm install @inovua/reactdatagrid-enterprise --save<ReactDataGrid /> are published and available in the public npm registry.<ReactDataGrid /> in your apps.<ReactDataGrid /> even without a license key - all features are available and ready to use, but a license notice will be displayed initially for a few seconds. If you want to remove that, you can contact us and we'll send you an evaluation license key which you can use for 30 days.<ReactDataGrid /> into end products or use it for any commercial, productive or training purpose without a valid commercial license. Read EULA for more details.licenseKey prop then you can start using the <ReactDataGrid /> in development and production.import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'
<ReactDataGrid
licenseKey="..."
/><ReactDataGrid /> and decide whether you need the Community or the Enterprise Edition.<ReactDataGrid />.<ReactDataGrid /> ships with multiple themes out-of-the-box, but the "default-dark" theme is used in this documentation. In order to use the default light theme, specify theme="default-light". See the section about theming below to find out more.<ReactDataGrid /> component, all you need to import is React and the code + styles of the component itself: @inovua/reactdatagrid-enterprise and @inovua/reactdatagrid-enterprise/index.css.<ReactDataGrid />. In the next sections and pages we'll explore how to use the <ReactDataGrid /> in various scenarios, supported props, functionality, theming, etc.<ReactDataGrid />, we treat props as immutable and only update the <ReactDataGrid /> when you pass different props.columns array when rendering the grid, instead of building the columns array in the render function of your app and passing it new each time to the grid, even when the columns don't change.<ReactDataGrid /> is fixed, as configured by rowHeight, which defaults to rowHeight=40.Columns are fundamental to grids, so defining them is rather easy - pass an array of objects with name property. A column should either have a name or an id property. If the id is specified, it should be unique. If a column only specifies the name property, it should also be unique.dataSource is an array of objects, with properties matching the names of the grid columns (the name property). Objects in the dataSource can contain any other properties, and will generally contain an identifier property - most of the times named id (which is also the default value). This identifier property name should be used as the idProperty to help uniquely identify grid rows.header (can be any valid React.Node) property to columns renders the corresponding value in the header of the respective column.columns at each render will slow down the rendering performance of the <ReactDataGrid />.dataSource items. This can be achieved by using the column.render function, as illustrated in the example below.column.defaultWidth (or the controlled column.width) . A flexible column needs to have column.defaultFlex (or the controlled column.flex) set to a valid numeric value - it's using flexbox layout to determine the dimension of the flexible column (subtracts the total fixed column widths from the total available space, then divide this by the sum of all flexes and multiply that value with the flex value of each flexible column). Additionally, column.minWidth and column.maxWidth can be configured for both fixed and flexible columns to ensure some minimum or maximum dimensions are always respected.column.width is a controlled prop, so when the user resizes the column, you have to make sure you listen to onColumnResize and update the column width accordingly.column.defaultWidth to specify the column size for a fixed column, so it updates the column width on resize without any other configuration.shareSpaceOnResize works (defaults to false). .<ReactDataGrid /> has flexible columns, and shareSpaceOnResize=false, when a column is resized (eg: made smaller), the flexible columns keep their current size and don't grow to fill the newly available space. However, they do keep their proportional size to all other flexible columns. Also, when the <ReactDataGrid /> has more available space, they do resize to keep the same empty space in the <ReactDataGrid />.<ReactDataGrid /> is configured with shareSpaceOnResize=true, and a column is resized, flexible columns are resized to fill all available space to ensure that columns always fill the <ReactDataGrid /> viewport horizontally.shareSpaceOnResize for an example.resizable. Specifying resizable=false makes all <ReactDataGrid /> columns unresizable.resizable prop can be controlled at column level. Specify column.resizable=false to make a certain column unresizable by the user or column.resizable=true to specifically enable user resizing on a certain column.onColumnResize callback prop is called to notify the column size update. The width of the column resize handle is configurable via columnResizeHandleWidth.name prop by default render the value in the corresponding property in the dataSource items.name or an id) is supported via the column.render function prop. The column.render is passed an object with the following properties:value - if the column has a name, the value would be the value rendered if no column.render property were configured.data - the data object in the dataSource corresponding to the current row being rendered.cellProps: Object - the props being passed to the cell corresponding to the current row and column.rowIndex: Number - the index of the current row being rendered.rowSelected: Boolean - a boolean value indicating if the current row is selected or not.rowActive: Boolean - a boolean value indicating if the current row is keyboard active or not.cellSelected: Boolean - a boolean value indicating if the current cell is selected or not.empty: Boolean - a boolean value indicating if the current row is an empty row or not. See showEmptyRows for details.totalDataCount: Number - the total count of rows that will be rendered.column.render function is reused - so you should not keep a reference to it. Instead, use ES6 destructuring to take the values you are interested in from this object.const columns = [
{
name: 'firstName',
header: 'First Name',
defaultFlex: 1,
header: 'First Name'
},
{
name: 'lastName',
header: 'Last Name',
defaultFlex: 1,
header: 'Last Name'
},
{
name: 'country',
header: 'Country',
defaultWidth: 60,
resizable: false,
render: ({ value }) => flags[value] ? flags[value] : 'unknown'
},
{
id: 'fullName',
header: 'Full Name',
minWidth: 100,
defaultFlex: 1,
render: ({ data }) => data.firstName + ' ' + data.lastName
},
{
name: 'age',
header: 'Age',
render: ({ value }) => <span
style={{ color: value < 30 ? 'lightgreen' : 'inherit'}}
>{value}</span>
}
]<ReactDataGrid /> column cells are optimized to only render when there is a change in the underlying dataSource, therefore, the column.render function should be pure. If not pure, and if the column.render uses variables defined outside of the function, make sure you specify columns.shouldComponentUpdate to return true.header, the column.name is used (after it's upper-cased and humanized) as the column header.column.header prop (any valid React.Node or even a function) you can have full control over what gets rendered as the column header - even for different states of the column (sorted, filtered, etc).column.sortable=false. The third column uses custom cell rendering, via the column.render function.dataSource prop specifies the source of data for grid contents. The <ReactDataGrid /> supports both sync & async dataSource.dataSource, in the form of an array. The dataSource items (the objects in the array) are not constrained to a specific shape, but they need to have a property which can be used as a unique identifier (most often, this is called "id"). When configuring the <ReactDataGrid />, this property should be specified in the idProperty="id". The properties in the dataSource items, although not constrained to a certain shape, will generally match the configured columns.<ReactDataGrid />, we treat props as immutable and only update the <ReactDataGrid /> when you pass different props.dataSource when rendering the grid, instead of building the dataSource in the render function of your app and passing it new each time to the grid, even when the dataSource doesn't change.dataSource on each render when it doesn't change is especially important in some cases when the <ReactDataGrid /> indexes your dataSource array or performs other performance-sensitive tasks.array, the <ReactDataGrid /> supports async dataSource which can be specified as a Promise or a function returning a Promise. Again, the rules of immutability apply, so make sure you pass a reference to the same Promise/function when you want to render the same-exact dataSource.dataSource or as returned by the dataSource function) should be resolved with two possible value types:array - to be used as the data for the griddata: Array and count: Number properties - this is generally useful when using remote data with pagination and the count represents the total number of records on the server (only a part of those are sent to the client via pagination).Promise, dataSource as a function can also return an array, for synchronous dataSource that you want to have full control over (this function is called with information about sortInfo, and limit).dataSource is used, a <LoadMask is displayed while the promise is unresolved, and hidden once the promise is resolved. However, you can also use the controlled loading prop to have full control over when the grid shows the loading mask.onLoadingChange to know when the <LoadMask is being shown or hidden.dataSource, see the pagination page.<ReactDataGrid />, a message indicating that no records are available is shown, as specified by emptyText.<ReactDataGrid /> instance (you should only need this in very advanced cases) - you can add a onReady function prop, to get a reference to the computed props of the grid, which holds all the required info for grid rendering. For example, seeclearAllFilters method usage for an example on usage.<ReactDataGrid /> supports a theme prop, which by default has the value of "default-light".@inovua/reactdatagrid-enterprise/index.css into your app:import '@inovua/reactdatagrid-enterprise/index.css'<ReactDataGrid /> , as well as the default (light) theme.<ReactDataGrid />, you can import @inovua/reactdatagrid-enterprise/base.css instead.import '@inovua/reactdatagrid-enterprise/base.css'<ReactDataGrid /> appearance from scratch.import '@inovua/reactdatagrid-enterprise/base.css'
import '@inovua/reactdatagrid-enterprise/theme/default-light.css'"amber-light" "amber-dark" "blue-light" "blue-dark" "default-light" "default-dark" "green-light" "green-dark" "pink-light" "pink-dark" @inovua/reactdatagrid-enterprise/theme/<THEME_NAME>.css. Also make sure you import @inovua/reactdatagrid-enterprise/base.css (or @inovua/reactdatagrid-community/base.css). The base.css file is included with @inovua/reactdatagrid-enterprise/index.css, which contains @inovua/reactdatagrid-enterprise/base.css AND the default theme, @inovua/reactdatagrid-enterprise/theme/default-light.css.<ReactDataGrid /> components, go ahead to the section on DataGrid styling and theming.ReactDataGrid is running well even in IE11 - though we expect the experience on IE11 to degrade soon as we adopt newer technologies that are only present in the latest browser versions, as IE11 is not officially supported by our team.5.0.0 version, the ReactDataGrid is also supported on React 18.16.8.0 - it's the version that adds support for React hooks.ReactDataGrid before hooks came out and before some React lifecycle methods have been deprecated. After React 16.8.0 was released we decided it was worth migrating to hooks to simplify our code and be able to better share logic internally. It was around that time that we decided to pivot to TypeScript and give ourselves and our users the confidence of types and better intellisense.