Light easy to use free open source to create custom React data grids.
Demo: https://izharfine.com/ezdatagrid/
npm install ez-data-grid --save
import React, { useState } from 'react';
import EzGrid, { EzColumn } from 'ez-data-grid';
function Example() {
const [mockData, setMockData] = useState([
{ id: 0, name: "Izhar Fine", gender: "male", company: "home", isActive: true },
{ id: 1, name: "Tamara Vaisman", gender: "female", company: "mall", isActive: true },
{ id: 2, name: "Moshe Cohen", gender: "male", company: "renegade", isActive: false }
]);
const [settings, setSettings] = useState(
{
disableFilters: false,
disableChooseRows: false,
disableSorting: false
});
return (
<EzGrid data={mockData} settings={settings} onValueChange={(currentValue, parent, columnId, prevValue) => {
// Handle the value change here.
}}>
<EzColumn key={"id"} title={"Id"} />
<EzColumn key={"name"} title={"Name"} type={"text"} editable />
<EzColumn key={"company"} title={"Company"} type={"text"} editable />
<EzColumn key={"isActive"} title={"Active"} type={"checkbox"} editable />
</EzGrid>);
}
export default Example;
Will be that data for the grid rows.
Optional settings for the grid.
Event handler call back, triggered on search change - return search input value.
Event handler call back, triggered on page changed - return page number.
Event handler call back, creates add button - return column ids + titles.
Event handler call back, triggered on column value change (on editable mode) - return new value, row parent, column id, previous value.
Event handler call back, triggered when row chosen (when disableChooseRows is off) - return the chosen row.
Disable filters feature, default: false.
Disable multi select feature, default: false.
Disable sorting feature, default: false.
Disable paging feature (paging very useful for much better performance specialy with big data), default: false.
Set the grid max-height prop, default: 736px.
Unique key from your EzGrid data param that describes columns you want to render.
The title you want for the column.
If this is editable column, if you use it you must provide the type prop as well.
Set the column type for editable mode. supported types: text, number, checkbox, date.
Set the column min-width(only in pixels). default: 80px;
If this column have no data to take from EzGrid data (useful for custom coolumn).
You can create your own custom column, this is example for how to do it.
../
const CostumButton = props => {
const customClick = (e) => {
let rowData = props.parent;
}
return (
<div onClick={customClick}>
CLICK
</div>)
}
../
<EzGrid data={mockData} settings={settings}>
<EzColumn key="id" title="Id"></EzColumn>
<EzColumn key="gender" title="Gender"></EzColumn>
<EzColumn key="title" title="Title"></EzColumn>
<CostumButton key={"custom"} title={"Actions"} isWithoutData />
</EzGrid>
../