@jeremyling/react-material-ui-enhanced-table
TypeScript icon, indicating that this package has built-in type declarations

0.6.2 • Public • Published

React Material UI Enhanced Table

An extended React Material UI Table that aims to make creating complex tables more straightforward.

Installation

npm install --save @jeremyling/react-material-ui-enhanced-table

The following packages are peer dependencies that must be installed for this package to work.

  @mui/material
  @mui/icons-material
  @mui/lab
  date-fns
  lodash

Usage Examples

Example of a collapsible table with a nested table as the collapse content.

import React, { useEffect, useState } from "react";
import EnhancedTable from "@jeremyling/react-material-ui-enhanced-table";
import { amber, green, indigo, lightGreen, red } from "@mui/material/colors";
import { Block, MoveToInbox } from "@mui/icons-material";

export default function Orders(props) {
  const [data, setData] = useState([]);
  const [totalCount, setTotalCount] = useState();
  const [tableLoading, setTableLoading] = useState(false);
  const [order, setOrder] = useState("");
  const [orderBy, setOrderBy] = useState("");
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const [selectedRow, setSelectedRow] = useState();
  const [selectedItems, setSelectedItems] = useState({});

  const [openRows, setOpenRows] = useState({});

  const [filters, setFilters] = useState();

  const [notificationsCount, setNotificationsCount] = useState();

  const headers = [
    {
      key: "collapse",
      collapse: true,
    },
    { attribute: "order_number", label: "Order No" },
    {
      key: "status",
      attribute: "status",
      label: "Status",
      chip: true,
      chipColor: {
        "In Progress": [amber[50], amber[200]],
        Completed: [green[50], green[200]],
      },
    },
    {
      attribute: "updated_at",
      datetime: true,
      label: "Updated",
    },
    {
      multiField: true,
      key: "customer",
      multiFieldData: [
        {
          attribute: "user.name",
        },
        {
          attribute: "user.email",
        },
        {
          attribute: "user.phone",
        },
      ],
      html: `
        <div><strong>{{0}}</strong></div>
        <div style="color: #777">{{1}}</div>
        <div style="color: #777">{{2}}</div>
      `,
      label: "Customer",
    },
    {
      attribute: "total",
      label: "Total",
      numeric: true,
      price: true,
    },
    {
      key: "actions",
      actions: [
        {
          id: "process",
          icon: <MoveToInbox />,
          tooltip: "Process",
          onClick: (event, row) => handleAction(event, "process", row),
          color: amber[400],
          hideCondition: (row) => {},
        },
        {
          id: "cancel",
          icon: <Block />,
          tooltip: "Cancel",
          onClick: (event, row) => handleAction(event, "cancel", row),
          color: indigo[400],
        },
      ],
      label: "Actions",
    },
  ];

  const collapseContent = () => {
    const collapseHeaders = [
      {
        key: "checkbox",
        checkbox: true,
      },
      {
        key: "image",
        label: "Image",
        component: (data) => (
          <img src={data.image.url} alt={data.name} loading="lazy" />
        ),
        stopPropagation: true,
      },
      {
        multiField: true,
        key: "product",
        multiFieldData: [
          {
            attribute: "product.name",
          },
          {
            attribute: "product.sku",
          },
        ],
        html: `
        <div><strong>{{0}}</strong></div>
        <div><strong style="color: #777">SKU: {{1}}</strong></div>
      `,
        label: "Product",
        minWidth: "200px",
      },
      {
        key: "status",
        attribute: "status",
        label: "Status",
        chip: true,
        chipColor: {
          Pending: [amber[50], amber[200]],
          Paid: [lightGreen[50], lightGreen[200]],
          Processed: [indigo[50], indigo[200]],
          Completed: [green[50], green[200]],
        },
      },
      {
        attribute: "updated_at",
        datetime: true,
        label: "Updated",
      },
      { attribute: "quantity", label: "Qty", numeric: true },
      {
        key: "actions",
        actions: [
          {
            id: "process",
            icon: <MoveToInbox />,
            tooltip: "Process",
            onClick: (event, row) => handleAction(event, "process", row),
            color: amber[400],
            hideCondition: (data) => {},
          },
          {
            id: "cancel-order",
            icon: <Block />,
            tooltip: "Cancel",
            onClick: (event, row) => handleAction(event, "cancel", row),
            color: indigo[400],
          },
        ],
        label: "Actions",
      },
    ];

    if (data) {
      return data.map((order) => (
        <EnhancedTable
          key={order.order_number}
          rows={order.order_items}
          headers={collapseHeaders}
          handleActionClick={(event, key) => handleAction(event, key)}
          handleRowClick={(event, row) =>
            handleCollapsibleTableRowClick(event, row)
          }
          selected={selectedItems[order.id]}
          showToolbar={false}
          selectibleRows={getSelectibleItems(selectedRow)}
        />
      ));
    }
  };

  const handleRowClick = (event, item) => {
    setSelectedRow(item);
  };

  function handleCollapsibleTableRowClick(event, row) {}

  function getSelectibleItems(row) {}

  function updateOpenRows(event, key, value) {
    event.stopPropagation();

    let updated = JSON.parse(JSON.stringify(openRows));
    updated[key] = value;
    setOpenRows(updated);
  }

  const handleRequestSort = (event, property) => {
    if (orderBy !== property) {
      setOrder("asc");
      setOrderBy(property);
      return;
    }

    switch (order) {
      case "asc":
        setOrder("desc");
        break;
      case "desc":
        setOrder("");
        setOrderBy("");
        break;
      default:
        break;
    }
  };

  const handlePageChange = (event, newPage) => {
    setPage(newPage);
  };

  const handleRowsPerPageChange = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(1);
  };

  const handleDateChange = (type, value) => {
    // Update filters
  };

  function handleAction(event, key, row = null) {}

  useEffect(() => {
    getData();

    function getData() {
      // Fetch data with filters
    }
  }, [order, orderBy, rowsPerPage, page, filters]);

  return (
    <EnhancedTable
      rows={data || []}
      totalCount={totalCount}
      headers={headers}
      order={order}
      orderBy={orderBy}
      loading={tableLoading}
      page={page}
      rowsPerPage={rowsPerPage}
      handleRowClick={handleRowClick}
      handleRequestSort={handleRequestSort}
      handlePageChange={handlePageChange}
      handleRowsPerPageChange={handleRowsPerPageChange}
      handleActionClick={(event, key) => handleAction(event, key)}
      handleDateChange={handleDateChange}
      dates={{ from: filters.dateFrom, to: filters.dateTo }}
      actionButtons={["dateFilters", "refresh"]}
      collapsible={true}
      collapseContent={collapseContent}
      refreshBadgeCount={notificationsCount}
      disableSelection={true}
      openRows={openRows}
      handleCollapseIconClick={updateOpenRows}
    />
  );
}

Example with a nested table within each row

import React, { useEffect, useState } from "react";
import EnhancedTable from "@jeremyling/react-material-ui-enhanced-table";
import { green, red } from "@mui/material/colors";

export default function Products(props) {
  const [data, setData] = useState([]);
  const [totalCount, setTotalCount] = useState();
  const [tableLoading, setTableLoading] = useState(true);
  const [order, setOrder] = useState("asc");
  const [orderBy, setOrderBy] = useState("");
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [selected, setSelected] = useState({});
  const [universalFilter, setUniversalFilter] = useState("");

  const [nestedRowAction, setNestedRowAction] = useState({});

  const [filters, setFilters] = useState();

  const headers = [
    {
      key: "images",
      label: "Images",
      component: (data) => (
        <img src={data.image.url} alt={data.name} loading="lazy" />
      ),
      stopPropagation: true,
    },
    {
      multiField: true,
      key: "product",
      multiFieldData: [
        {
          attribute: "name",
        },
        {
          attribute: "sku",
        },
      ],
      html: `
        <div><strong>{{0}}</strong></div>
        <div><strong style="color: #777">SKU: {{2}}</strong></div>
      `,
      label: "Product",
      minWidth: "200px",
    },
    {
      key: "status",
      attribute: "status",
      label: "Status",
      chip: true,
      chipColor: {
        Inactive: [red[50], red[200]],
        Active: [green[50], green[200]],
      },
    },
    { attribute: "category", label: "Category" },
    { attribute: "stock", label: "Stock", sortable: true, numeric: true },
    {
      key: "price",
      label: "Price",
      arrayAttribute: "prices",
      childAttribute: "amount",
      childAttribute2: "currency",
      childLabelAttribute: "tag",
      childActions: { delete: true, edit: true, add: true },
      numeric: true,
      price: true,
    },
  ];

  const handleRowClick = (event, item) => {
    if (item.id === selected.id) {
      setSelected({});
      return;
    }
    setSelected(item);
  };

  const handleAction = (event, key) => {};

  const handleRequestSort = (event, property) => {
    if (orderBy !== property) {
      setOrder("asc");
      setOrderBy(property);
      return;
    }

    switch (order) {
      case "asc":
        setOrder("desc");
        break;
      case "desc":
        setOrder("asc");
        setOrderBy("");
        break;
      default:
        break;
    }
  };

  const handleUniversalFilterChange = (event) => {
    setUniversalFilter(event.target.value);
  };

  const handlePageChange = (event, newPage) => {
    setPage(newPage);
  };

  const handleRowsPerPageChange = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleNestedAction = (event, type, item, id) => {};

  const handleNestedFieldChange = (parentId, id, attribute, value) => {};

  useEffect(() => {
    const getData = () => {
      // Fetch data with filters
    };

    getData();
  }, [universalFilter, order, orderBy, rowsPerPage, page, filters]);

  return (
    <EnhancedTable
      rows={data || []}
      totalCount={totalCount}
      descriptorAttribute="name"
      headers={headers}
      order={order}
      orderBy={orderBy}
      loading={tableLoading}
      page={page}
      rowsPerPage={rowsPerPage}
      selected={[selected]}
      handleRowClick={handleRowClick}
      handleRequestSort={handleRequestSort}
      handlePageChange={handlePageChange}
      handleRowsPerPageChange={handleRowsPerPageChange}
      handleNestedAction={handleNestedAction}
      handleNestedFieldChange={handleNestedFieldChange}
      handleActionClick={(event, key) => handleAction(event, key)}
      actionButtons={["create", "edit", "delete", "filter", "refresh"]}
      handleUniversalFilterChange={handleUniversalFilterChange}
      nestedRowAction={nestedRowAction}
    ></EnhancedTable>
  );
}

Props

Prop Type Default Description
title string undefined Table title
rows array required Table row data
headers array required Table headers. Customise with props (see below)
dense bool true Whether to use dense prop for Material UI's Table
order string asc Column sort order. One of :
asc,
desc
orderBy string id Attribute to sort column by
loading bool false Whether to display loading Backdrop component
page number 1 Current page
totalCount number undefined Total result count
rowsPerPage number 10 Number of rows per page
selected array [] Selected row
descriptorAttribute string undefined Attributed used to display descriptor for selected row in toolbar
handleRowClick func () => {} Method to handle row click event
handleRequestSort func () => {} Method to handle column sort click
handlePageChange func undefined Method to handle page change
handleRowsPerPageChange func undefined Method to handle rows per page change
handleUniversalFilterChange func () => {} Method to handle universal filter onChange event
handleDateChange func () => {} Method to handle date changes in date filters
handleActionClick func () => {} Method to handle table action click
handleNestedAction func () => {} Method to handle action click within a nested table in a row
handleNestedFieldChange func () => {} Method to handle nested field onChange event
nestedRowAction object {} Object indicating the actions available for each nested row. Possible actions include add or edit. Object needs to be of the form { [nestedRowIdentifier]: { add: true, edit: true } }
date string undefined Filter dates. Must be in the form yyyy-MM-dd
dates object undefined Filter dates. Must be in the form { from: "yyyy-MM-dd", to: "yyyy-MM-dd" }
actionButtons array ["create", "edit", "delete", "filter"] Actions to include in table
showToolbar bool true Whether to show the toolbar
collapsible bool false Whether each row should be collapsible
collapseContent array null Array of content for each collapsible row. Index of this array should correspond to index of rows. The collapse content for rows[0] should be collapseContent[0]. Default collapse content is a table.
collapseHeaders array [] Headers for default table within collapse content. Required if collapsible = true and collapseContent prop is not passed
openRows object {} Object to indicate which collapsible rows should be open. Object should be of the form { [row[identifier]]: true }
identifier string id Attribute used as row identifier
handleCollapseIconClick func () => {} Method to handle collapse icon click event
disableRowClick bool false Whether to ignore click event on row
disableSelection bool false Makes rows unselectable
selectibleRows array null Manually define the selectible rows. Array should contain the row identifiers
refreshBadgeCount number 0 Badge count for refresh button. This can be used to indicate whether the table has pending unfetched data

Header Props

Prop Type Default Description
key string attribute Attribute used to determine row key
attribute string undefined Attribute used to determine cell content
label string undefined Header label
multiField bool undefined Whether the cell should display content from multiple attributes. Best used with data and html props.
multiFieldData array undefined Array of attributes used for multiField content. Required if multiField = true. Array should be of the form [{ attribute: "name" }]
html string undefined HTML code for displaying content. Attribute will be substituted in for {{0}}. If used with multiField, data attributes will be substituted in for {{index}}, where index is the position index of the data array
chip bool undefined If true, column will contain a Material UI Chip populated with attribute. The color prop can be used to determine the Chip's color
chipColor object undefined Used with chip. Object of the form { [option]: [bgColor, borderColor] }
collapse bool undefined If true, column will contain a collapse icon
checkbox bool undefined If true, column will contain a Material UI Checkbox component that is controlled by whether the row is selected
actions array undefined Array containing possible actions for each row. Should be of the form { id: "cancel", icon: <Block />, tooltip: "Cancel", onClick: (event, row) => {}, color: indigo[400], hideCondition: (data) => {} }
headerActions array undefined Array containing possible actions for the header. Should be of the form { id: 'edit', icon: <Edit />, tooltip: 'Edit', onClick: (event) => {}, hideCondition: false, color: indigo[400]}
component func undefined Custom component for cell content. Row data is passed as sole parameter.
stopPropagation bool undefined Used with component. If true, cell component click will stop further propagation to parent row.
arrayAttribute string undefined Attribute used to populate nested table within row
childAttribute string undefined Attribute within arrayAttribute object to display as nested row
childAttribute2 string undefined Attribute within arrayAttribute object to display on left of childAttribute within nested row
childLabelAttribute string undefined Attribute within arrayAttribute object to display on left of childAttribute and childAttribute2 within nested row
childAttributeLabel string undefined Label for childAttribute
childAttribute2Label string undefined Label for childAttribute2
childLabelAttributeLabel string undefined Label for childLabelAttribute
childActions object undefined Object indicating which actions to show for each nested row. Actions available are add, edit and delete. Should be of the form { delete: true, edit: true, add: true }.
orderBy^ array undefined Attribute to order nested table content. Should be of the form [attribute, asc|desc]
numeric bool undefined If true, content will be right-aligned
price bool undefined If true, content will be prefixed with $
date bool undefined If true, content will be parsed with date-fns in the format d MMM yyyy
datetime bool undefined If true, content will be parsed with date-fns in the format d MMM yyyy and h:mm:ss a
time bool undefined If true, content will be parsed with date-fns in the format h:mm:ss a
truncate number undefined Max length of string content
width number undefined Fixed width for column
minWidth number undefined Minimum width for column
maxWidth number undefined Maximum width for column
disablePadding bool undefined If true, cell padding will be set to 0
sortable bool undefined If true, column will be sortable based on attribute. attribute is required for column to be sortable

^Only for nested table

Package Sidebar

Install

npm i @jeremyling/react-material-ui-enhanced-table

Weekly Downloads

42

Version

0.6.2

License

MIT

Unpacked Size

466 kB

Total Files

7

Last publish

Collaborators

  • jeremyling