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
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}
/>
);
The post Create Full Functional Data Grid For ReactJs Application appeared first on Lipku.com.
