Contents
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 sourceSortingPaginationInline edit with custom editor supportFiltering with built in filtersStacked columnsContext menu integrationRowspan and colspanRow selectionCell selectionKeyboard navigationCustomizing rows, cells and headersScroll customizationRTL supportBeautiful themesColumn reorderColumn 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.