reactgrids

Powerful, performant and feature-rich grid for React development.

Installation

# with npm
npm install @toyesebalogun/reactgrids

# with yarn
yarn add @toyesebalogun/reactgrids

Basic Usage

import { ReactGrid } from "@toyesebalogun/reactgrids";

const columns = [
  { name: "name", field: "name", width: 200 },
  { name: "email", field: "email", width: 250 },
  { name: "mobile", field: "phone", width: 140 },
  { name: "gender", field: "gender", width: 90 },
];

const rows = [
  {
    id: 1,
    name: "Paulie Brankley",
    email: "[email protected]",
    phone: "805-477-8432",
    gender: "Male",
  },
  {
    id: 2,
    name: "Roselle Corby",
    email: "[email protected]",
    phone: "153-117-8104",
    gender: "Female",
  },
  {
    id: 3,
    name: "Thaine Jurges",
    email: "[email protected]",
    phone: "210-129-7060",
    gender: "Male",
  },
  {
    id: 4,
    name: "Susannah Mansford",
    email: "[email protected]",
    phone: "980-718-9301",
    gender: "Female",
  },
];

const App = () => {
  return <ReactGrid columns={columns} rows={rows} />;
};

Props

ReactGrid accepts a wide range of compulsory and optional props and events. Each prop has adds a specific functionality to the component.

| Props | Type | Example | Description | | ------------- | -------- | ----------------------------------------------- | ---------------------------------------------------- | | columns | Array | [{name: "brand", field:"carbrand", width: 120}] | Contains an array of grid column header definitions. | | rows | Array | [{carbrand: "Mercedes", year: "2022"}] | Contains an array of grid row data to be rendered. | | onGridReady | Function | (params: GridReadyParams) => //...something | Accepts a handler function as props | | onRowClicked | Function | (params: RowClickParams) => //...something | Accepts a handler function as props | | onCellClicked | Function | (params: CellClickParams) => //...something | Accepts a handler function as props |

Custom Cell Renderer

import { ReactGrid } from "@toyesebalogun/reactgrids";
import rows from "./rows";
import { customGenderCellRenderer } from "./custom/cells";

const columns = [
  { name: "name", field: "name", width: 200 },
  { name: "email", field: "email", width: 250 },
  { name: "mobile", field: "phone", width: 140 },
  {
    name: "gender",
    field: "gender",
    width: 90,
    colRenderer: customGenderCellRenderer,
  },
];

const App = () => {
  return <ReactGrid columns={columns} rows={rows} />;
};

License

MIT