material-table-next

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

A simple material-ui data table

``javascript
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 ;
},
},
{
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 (


render(, document.querySelector("#demo"));
``

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo