Create Full Functional Data Grid For ReactJs Application

Category: React Table | July 15, 2021
Author: inovua
Official Page: Go to website
Last Update: August 4, 2021
License: MIT

react data grid

Description:

You must be looking to create full functional data grid for your ReactJs project that enables your users to navigate with the data with great features such as sorting, filtering the data based on columns etc. Then, this component is best for you.

Features available:

  • Remote data source
  • Sorting
  • Pagination
  • Inline edit with custom editor support
  • Filtering with built in filters
  • Stacked columns
  • Context menu integration
  • Rowspan and colspan
  • Row selection
  • Cell selection
  • Keyboard navigation
  • Customizing rows, cells and headers
  • Scroll customization
  • RTL support
  • Beautiful themes
  • Column reorder
  • Column resize

You might be interested in:

How to create data grid?

1. You will need to install the data grid component for React with npm.

npm install @inovua/reactdatagrid-community --save

2. Import the required components.

import React from 'react';
import ReactDataGrid from '@inovua/reactdatagrid-community';
import '@inovua/reactdatagrid-community/index.css';

3. Create columns and data source. Like this:

const columns = [
  { name: 'name', header: 'Name', minWidth: 50, defaultFlex: 2 },
  { name: 'age', header: 'Age', maxWidth: 1000, defaultFlex: 1 },
];

const gridStyle = { minHeight: 550 };

const dataSource = [
  { id: 1, name: 'John McQueen', age: 35 },
  { id: 2, name: 'Mary Stones', age: 25 },
  { id: 3, name: 'Robert Fil', age: 27 },
  { id: 4, name: 'Roger Robson', age: 81 },
  { id: 5, name: 'Billary Konwik', age: 18 },
  { id: 6, name: 'Bob Martin', age: 18 },
  { id: 7, name: 'Matthew Richardson', age: 54 },
  { id: 8, name: 'Ritchie Peterson', age: 54 },
  { id: 9, name: 'Bryan Martin', age: 40 },
  { id: 10, name: 'Mark Martin', age: 44 },
  { id: 11, name: 'Michelle Sebastian', age: 24 },
  { id: 12, name: 'Michelle Sullivan', age: 61 },
  { id: 13, name: 'Jordan Bike', age: 16 },
  { id: 14, name: 'Nelson Ford', age: 34 },
  { id: 15, name: 'Tim Cheap', age: 3 },
  { id: 16, name: 'Robert Carlson', age: 31 },
  { id: 17, name: 'Johny Perterson', age: 40 },
];

export default () => (
  <ReactDataGrid
    idProperty="id"
    columns={columns}
    dataSource={dataSource}
    style={gridStyle}
  />
);