README.md

react-material-ui-table

Create table with Material-ui Table for React.

Requirements

• Node
• NPM
• Yarn (instead of NPM)

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.