1.0.13 • Published 3 years ago
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>
);
}