EZ data-grid

Light easy to use free open source to create custom React data grids. Demo: https://izharfine.com/ezdatagrid/

Installation

npm install ez-data-grid --save

Usage simple example

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;

EzGrid

Params:

data (required) - Array of JSON objects

Will be that data for the grid rows.

settings - JSON object

Optional settings for the grid.

onSearchChange - function

Event handler call back, triggered on search change - return search input value.

onPageChange - function

Event handler call back, triggered on page changed - return page number.

onAddButtonClick - function

Event handler call back, creates add button - return column ids + titles.

onValueChange - function

Event handler call back, triggered on column value change (on editable mode) - return new value, row parent, column id, previous value.

onChooseRows - function

Event handler call back, triggered when row chosen (when disableChooseRows is off) - return the chosen row.

Settings(optional):

disableFilters - bool

Disable filters feature, default: false.

disableChooseRows - bool

Disable multi select feature, default: false.

disableSorting - bool

Disable sorting feature, default: false.

disablePaging - bool

Disable paging feature (paging very useful for much better performance specialy with big data), default: false.

maxHeight - string

Set the grid max-height prop, default: 736px.

Columns

Params:

key (required) - string

Unique key from your EzGrid data param that describes columns you want to render.

title (required) - string

The title you want for the column.

editable - bool

If this is editable column, if you use it you must provide the type prop as well.

type - string

Set the column type for editable mode. supported types: text, number, checkbox, date.

minWidth - string

Set the column min-width(only in pixels). default: 80px;

isWithoutData - bool

If this column have no data to take from EzGrid data (useful for custom coolumn).

Custom column:

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>

../