@clipmx/table

Table related components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@clipmx/table
Minified + gzip package size for @clipmx/table in KB

Readme

Clip Table

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

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.