Clip Table

Wrapper for the following components from @materual-ui/core:

• Table: https://material-ui.com/api/table
• TableBody: https://material-ui.com/api/table-body
• TableCell: https://material-ui.com/api/table-cell
• TableFooter: https://material-ui.com/api/table-footer
• TableHead: https://material-ui.com/api/table-head
• TablePagination: https://material-ui.com/api/table-pagination
• TableRow: https://material-ui.com/api/table-row
• TableSortLabel: https://material-ui.com/api/table-sort-label

Installation

npm install @clipmx/table --save

Usage

import React from 'react';
import Table, { TableCell, TableHead, TableRow } from '@clipmx/Table';

function createTableItems(items) {
  return items.map(item => (
    <TableRow key={cuid()}>
      {item.map(value => <TableCell key={cuid()}>{value}</TableCell>)}
    </TableRow>
  ));
}

class MyComponent extends React.Component {
  render() {
    const tableItems = createTableItems([
      ['Frozen yoghurt', 159, 6.0, 24, 4.0],
      ['Ice cream sandwich', 237, 9.0, 37, 4.3],
      ['Eclair', 262, 16.0, 24, 6.0],
      ['Cupcake', 305, 3.7, 67, 4.3],
      ['Gingerbread', 356, 16.0, 49, 3.9],
    ]);
    return (
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{tableItems}</TableBody>
      </Table>
    );
  }
}

export default MyComponent;

Props

This is a wrapper of the Material-UI Table related components, so you can use any props that those components accept.