2.0.0 • Published 2 years ago
@benjaminnoufel/react-material-ui-table v2.0.0
react-material-ui-table
Create table with Material-ui Table for React.
Requirements
Installation
NPM
$ npm install @mui/material @mui/styles react @benjaminnoufel/react-material-ui-table
Yarn
$ yarn add @mui/material @mui/styles react @benjaminnoufel/react-material-ui-table
Usage
Use ReactMaterialUiTable without additionnalColumns
import {ReactMaterialUiTable, formatHeaderColumn} from "@benjaminnoufel/react-material-ui-table"
import React from "react";
const App = () => {
const head = {
name: "Name",
description: "Description",
reference: "Reference"
}
const headers = formatHeaderColumn(head);
const rows = [
{
name: "Product 1",
description: "Description of product one",
reference: "P-252-98"
},
{
name: "Product 2",
description: "Description of product two",
reference: "P-252-99"
}
]
return (
<>
<ReactMaterialUiTable
headers={headers}
hiddenColumns={["__v", "label"]}
rows={rows}
/>
</>
);
}
Use ReactMaterialUiTable with additionnalColumns
import ReactMaterialUiTable from "@benjaminnoufel/react-material-ui-table"
import React from "react";
const App = () => {
const head = {
name: "Name",
description: "Description",
reference: "Reference"
}
const headers = formatHeaderColumn(head);
const rows = [
{
name: "Product 1",
description: "Description of product one",
reference: "P-252-98"
},
{
name: "Product 2",
description: "Description of product two",
reference: "P-252-99"
}
]
return (
<>
<ReactMaterialUiTable
headers={headers}
hiddenColumns={["__v", "label"]}
rows={entities}
additionnalColumns={[(id: any) => <button onClick={() => alert(`id = ${id}`)}>Click on me</button>]}
/>
</>
);
}
API
type AdditionnalColumn = (id: any) => JSX.Element;
interface ReactMaterialUiTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
headers: Record<string, string>;
rows: Array<Record<string, any>>;
labelRowsPerPage?: string;
backIconButtonText?: string;
nextIconButtonText?: string;
showSearch?: boolean;
hiddenColumns?: string[];
rowsPerPage?: number;
rowsPerPageOptions?: number[];
additionnalColumnsId?: string;
additionnalColumnsLabel?: string;
additionnalColumns?: Array<AdditionnalColumn>;
}
License
See LICENSE
.
Changelog
See CHANGELOG.md
.
Contributions
See CONTRIBUTING.md
.