React Data Grids – The Complete Guide

const columns = [

    { key: "id", name: "ID" },

    { key: "name", name: "Name" },

    { key: "amount", name: "Amount" }

  ];

import * as React from "react";

const TableContainer = ({ striped, children }) => (

  <table className={striped ? "table-striped" : ""}>{children}</table>

);

const TableHeader = ({ children }) => <thead>{children}</thead>;

const TableBody = ({ children }) => <tbody>{children}</tbody>;

const TableRow = ({ children }) => <tr>{children}</tr>;

const TableCell = ({ children }) => <td>{children}</td>;

const MyTable = () => (

  <TableContainer striped>

    <TableHeader>

      <TableRow>

        <TableCell>ID</TableCell>

        <TableCell>Name</TableCell>

        <TableCell>Age</TableCell>

      </TableRow>

    </TableHeader>

import React from "react";

import ReactDataGrid from "react-data-grid";

import { Sparklines, SparklinesLine, SparklinesSpots } from "react-sparklines";

const Sparkline = ({ row }) => (

  <Sparklines

    data={[row.jan, row.feb, row.mar, row.apr, row.may, row.jun]}

    margin={6}

    height={40}

    width={200}

  >

    <SparklinesLine

      style={{ strokeWidth: 3, stroke: "#336aff", fill: "none" }}

    />

    <SparklinesSpots

      size={4}

      style={{ stroke: "#336aff", strokeWidth: 3, fill: "white" }}

    />

  </Sparklines>

);

const columns = [

  { key: "year", name: "Year" },

import  *  as  React  from  'react';

import  *  as  ReactDOM  from  'react-dom';

import { Grid, GridColumn  as  Column } from  '@progress/kendo-react-grid';

import  products  from  './products.json';

const  App = () => {

const [data, setData] = React.useState(products);

return (

  <>

    <Grid  data={data}>

      <Column  field="ProductID" title="ID" width="80px" filterable={false}  />

      <Column field="ProductName"  title="Name"  width="250px"  />

      <Column field="UnitsInStock" title="In stock" filter="numeric" width="100px" cell={InStockCell} />

      <Column field="UnitPrice" title="Price" filter="numeric" width="150px" />

    </Grid>

  </>

);

};

const [data, setData] = React.useState(products);

const [pausedTimer, setPausedTimer] = React.useState(true);

const [buttonLabel, setButtonLabel] = React.useState('Start');

const changeIntervalRef = React.useRef(null);

// Randomly selects a set of data items from our data and updates the UnitsInStock field

const  randomizeData = (passedData) => {

let  newData = passedData.slice();

for (

  let  i = Math.round(Math.random() * 10);

  i < newData.length;

  i += Math.round(Math.random() * 10)) {

  updateStock(newData);

}

return  newData;

};

// Randomly adds or removes 0-4 from UnitsInStock and changes the changeType from negative to positive.

const  updateStock = (passedRow) => {

let  oldUnitsInStock = passedRow.UnitsInStock;

let  updatedUnitsInStock = updateStockValue();

updatedUnitsInStock < 0 ? (passedRow.changeType = 'negative') : (passedRow.changeType = 'positive');

passedRow.isChanged = true;

passedRow.UnitsInStock = oldUnitsInStock - updatedUnitsInStock;

};


const  updateStockValue = () => {

  return  Math.floor(Math.random() * 4) * (Math.round(Math.random()) ? 1 : -1);

};