React Grid | Get Started with FancyGrid and React

Quick Look Code Example

import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";

const App = () => {
  const [height, setHeight] = useState(400);
  const [title, setTitle] = useState("Cars");

  const [columns, setColumns] = useState([
    { type: "order", locked: true },
    { index: "brand", title: "Brand", locked: true },
    { index: "model", title: "Model", autoWidth: true },
    { index: "manufactured", title: "Manufactured" },
    { index: "color", title: "Shade" },
    { index: "price", title: "Price", type: "currency" }
  ]);

  const [data, setData] = useState([
    {
      brand: "BMW",
      model: "X7",
      price: 98700,
      manufactured: "Germany",
      color: "Black"
    },
    {
      brand: "Land Rover",
      model: "DISCOVERY SPORT",
      price: 53000,
      manufactured: "UK",
      color: "Black"
    },
    {
      brand: "Jaguar",
      model: "E-PACE",
      price: 46642,
      manufactured: "UK",
      color: "Black"
    },
    {
      brand: "Jaguar",
      model: "I-PACE",
      price: 109557,
      manufactured: "UK",
      color: "Gray"
    },
    {
      brand: "Lexus",
      model: "NX 200",
      price: 38857,
      manufactured: "Japan",
      color: "Gray"
    }
  ]);

  const onGridInit = grid => {};

  return (
    <div style={{ marginTop: "5px" }}>
      <Grid
        height={height}
        theme={"extra-gray"}
        title={title}
        emptyText={"No rows to show"}
        selModel={{
          activeCell: true,
          type: "rows"
        }}
        defaults={{
          editable: true,
          resizable: true,
          menu: true
        }}
        events={[
          {
            init: onGridInit
          }
        ]}
        columns={columns}
        data={data}
      />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Open in StackBlitz

Fetch data

import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";

const App = () => {
  const [height, setHeight] = useState(400);
  const [title, setTitle] = useState("Cars");

  const [columns, setColumns] = useState([
    { type: "order", locked: true },
    { index: "brand", title: "Brand", locked: true },
    { index: "model", title: "Model", autoWidth: true },
    { index: "manufactured", title: "Manufactured" },
    { index: "color", title: "Shade" },
    { index: "price", title: "Price", type: "currency" }
  ]);

  const [data, setData] = useState([]);

  return (
    <div style={{ marginTop: "5px" }}>
      <Grid
        height={height}
        theme={"extra-gray"}
        title={title}
        emptyText={"No rows to show"}
        selModel={{
          activeCell: true,
          type: "rows"
        }}
        defaults={{
          editable: true,
          resizable: true,
          menu: true
        }}
        tbar={[{
          text: 'Fetch Data',
          handler:()=>{
            fetch('https://fancygrid.com/data/cars.json')
              .then(result => result.json())
              .then(data=>setData(data));
          }
        }]}
        columns={columns}
        data={data}
      />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Open in StackBlitz