material-table-next

A simple material-ui data table

import React, { Component } from "react";
import { Chip } from "@mui/material";
import { render } from "react-dom";
import MaterialTableNext from "material-table-next";

const rows = [
  {
    id: "1",
    name: "Cupcake",
    calories: 805,
    fat: 3.7,
    carbs: 77,
    protein: 1.3,
  },
  {
    id: "2",
    name: "Donut",
    calories: 305,
    fat: 4.7,
    carbs: 97,
    protein: 6.3,
  },
  {
    id: "3",
    name: "Frozen yoghurt",
    calories: 705,
    fat: 2.7,
    carbs: 17,
    protein: 6.3,
  },
  {
    id: "4",
    name: "Gingerbread",
    calories: 605,
    fat: 2.7,
    carbs: 87,
    protein: 7.3,
  },
  {
    id: "5",
    name: "Honeycomb",
    calories: 105,
    fat: 2.7,
    carbs: 47,
    protein: 8.3,
  },
  {
    id: "6",
    name: "Ice cream sandwich",
    calories: 405,
    fat: 2.7,
    carbs: 67,
    protein: 6.3,
  },
];

const headCells = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)",
  },
  {
    id: "calories",
    numeric: true,
    disablePadding: false,
    label: "Calories",
    onRender: (data) => {
      return <Chip label={data?.calories} />;
    },
  },
  {
    id: "fat",
    numeric: true,
    disablePadding: false,
    label: "Fat (g)",
  },
  {
    id: "carbs",
    numeric: true,
    disablePadding: false,
    label: "Carbs (g)",
  },
  {
    id: "protein",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)",
  },
];

export default class Demo extends Component {
  render() {
    return (
      <div>
        <h1>material-table-next Demo</h1>
        <MaterialTableNext
          title={"Test Table"}
          searchKeys={["name"]}
          rows={rows}
          headCells={headCells}
          // loading={true}
          onDelete={(data) => {
            console.log("data", data);
          }}
          onEdit={(data) => {
            console.log(data);
          }}
        />
      </div>
    );
  }
}

render(<Demo />, document.querySelector("#demo"));