customised-mui-data-table v1.0.13

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

Here's how you can import and USE

import React from "react";
import CustomMUITable from "customised-mui-data-table";
export default function TablePage() {
  const TABLE_HEAD = [
    {
      id: "number",
      label: "#",
      alignRight: false,
      type: "number",
    },
    {
      id: "image",
      label: "Image",
      alignRight: false,
      type: "thumbnail",
    },
    { id: "title", label: "Page Title", alignRight: false },
    {
      id: "description",
      label: "Description",
      renderData: (row) => {
        return (
          <div>{row.description}</div>
        );
      },
    },
    {
      id: "status",
      label: "Status",
      renderData: (row) => {
        return (
          <Chip
            width="140px"
            label={row.status}
            variant="contained"
            color={"success"}
            size="small"
          />
        );
      },
    },
  ];
  const data = [
    {
      title: "Page Title 1",
      description: <h2>Page Title 1 description</h2>,
      image: {
        src: "https://dynamite-lifestyle-dev-app-bucket.s3.amazonaws.com/admin_user/8a6c68e6-a6f5-462e-87e9-9106d4a9b69d.png",
        alt: "Page Title 1",
      },
      status: "Active",
    },
    {
      title: "Page Title 2",
      description: <div><p>Page Title 2 description</p></div>,
      image: {
        src: "",
        alt: "Page Title 2",
      },
      status: "Inactive",
    },
  ];
  return (
    <div className="table-container">
      <CustomMUITable TABLE_HEAD={TABLE_HEAD} data={data} />
    </div>
  );
}