Top
DataGrid - Getting started
DataGrid
Zippytech React Datagrid Pro is a commercial component and as such, it is distributed via a private npm registry (https://registry.zippytech.io). So getting it installed requires the following steps:
  1. getting a commercial license - see the Pricing page and buy a license.
  2. we'll provide you with a username and password
  3. point your npm client to the correct registry for components scoped inside the @zippytech scope.
    $ npm config set @zippytech:registry https://registry.zippytech.io
    Even though you are setting the private registry for the @zippytech scope, you will still be able to use our open-source components, since the private registry forwards any requests for our free components to the public npm registry.
  4. login with your username for the @zippytech scope, on the private registry:
    $ npm login --registry=https://registry.zippytech.io --scope=@zippytech
    
    This will keep you logged-in with your current npm username outside of the @zippytech scope.
  5. check you are correctly logged-in for our private registry.
    $ npm whoami --registry=https://registry.zippytech.io
    
    This should display the username from step 2.
After those install steps, you should be able to install the <DataGrid /> as usual:
$ npm install @zippytech/react-datagrid-pro --save
Zippytech React Datagrid Pro also has a trial version available. For installing the trial version, you don't need to buy a license, but instead go to Get in touch page and click the DataGrid FREE Trial button to send us your details for a creating a trial account. Basically, the next steps are the same as listed above. For clarity, here's the list again, with all the steps you need to take in order to use the Zippytech React Datagrid Pro Trial version:
  1. You don't need to buy a license, but instead go to Get in touch page and click the DataGrid FREE Trial button to send us your details for a creating a trial account.
  2. we'll provide you with a username and password
  3. point your npm client to the correct registry for components scoped inside the @zippytech scope.
    $ npm config set @zippytech:registry https://registry.zippytech.io
    Even though you are setting the private registry for the @zippytech scope, you will still be able to use our open-source components, since the private registry forwards any requests for our free components to the public npm registry.
  4. login with your username for the @zippytech scope, on the private registry:
    $ npm login --registry=https://registry.zippytech.io --scope=@zippytech
    
    This will keep you logged-in with your current npm username outside of the @zippytech scope.
  5. check you are correctly logged-in for our private registry.
    $ npm whoami --registry=https://registry.zippytech.io
    
    This should display the username from step 2.
After those install steps, you should be able to install the <DataGrid /> trial version as usual:
$ npm install @zippytech/react-datagrid-pro-trial --save
If you're using the trial version of the <DataGrid />, make sure you import @zippytech/react-datagrid-pro-trial instead of @zippytech/react-datagrid-pro. In all the examples in this documentation, we use @zippytech/react-datagrid-pro, but if you have the trial version, just use @zippytech/react-datagrid-pro-trial instead. Everything else should be the same.
import DataGrid from '@zippytech/react-datagrid-pro-trial'
import '@zippytech/react-datagrid-pro-trial/index.css'
When switching from the trial version to the payed version, your username and password for our private registry at https://registry.zippytech.io remains the same as. The only change you have to do is to make sure you switch from using @zippytech/react-datagrid-pro-trial to using the commercial version from @zippytech/react-datagrid-pro.
To start using the <DataGrid /> component, all you need to import is React and the code + styles of the component itself: @zippytech/react-datagrid-pro and @zippytech/react-datagrid-pro/index.css.
This is the most basic setup for a DataGrid. In the following sections we'll explore how to use the <DataGrid /> in various scenarios, supported props, functionality, theming, etc.
To boost performance of the <DataGrid />, we treat props as immutable and only update the <DataGrid /> when you pass different props.
So for example, to improve the rendering performance, make sure you pass the same reference to a 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.
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.
The simplest 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.
Adding a header (can be any valid React.Node) property to columns renders the corresponding value in the header of the respective column.
Columns are probably one of the most important and dynamic parts of the grid, so go ahead and read about Configuring columns.
Just like any other component in the toolkit, the <DataGrid /> supports the theme prop, which by default has the value of "default", meaning that the default theme is applied.
In order for the default theme to be applied you have to import @zippytech/react-datagrid-pro/index.css into your app:
import '@zippytech/react-datagrid-pro/index.css'
This file contains both the structural styles that are needed for the <DataGrid /> , as well as the default theme.
In case you only want to load the structural styles for the <DataGrid />, you can import @zippytech/react-datagrid-pro/base.css instead:
import '@zippytech/react-datagrid-pro/base.css'
Be aware, though, that in this case you'll have to style the <DataGrid /> appearance from scratch.
However, you can import both the structural styles and the default theme separately:
import '@zippytech/react-datagrid-pro/base.css'
import '@zippytech/react-datagrid-pro/theme/default.css'
You can read more about theming any toolkit component in the theming overview.
To read more about specifically theming <DataGrid /> components, go ahead to the section on DataGrid styling and theming.
To boost performance, the <DataGrid /> uses a lot of virtualization techniques to be able to smoothly handle hundred of thousands of rows (and many columns) without a performance penalty.
As a consequence, by default the height of rows in the <DataGrid /> is fixed, as configured by rowHeight, which defaults to rowHeight=40.