React-table-container NPM

Installation

npm install --save react-table-container

Usage

import React from "react";
import ReactTableContainer from "react-table-container";

const CustomHTMLTableResizedWithFixedHeader = () => (
  <ReactTableContainer width="auto" height="500px">
    <table>
      <colgroup>
          <col span="1" className="" />
          ...
      </colgroup>
      <thead>
        <tr>
          <th>Header cell</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Body cell</td>
          ...
        </tr>
        <tr>
          <td>Body cell</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </ReactTableContainer>
);

export default CustomHTMLTableResizedWithFixedHeader;

Is there support for React components that render HTML table elements? Yes, the customHeader prop (as seen below) exists as an escape hatch for this purpose. The table's direct child components that render thead and colgroup elements must be passed to it. This is required in order to successfully stick the custom table header to the top.

// Based on https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/tables/SimpleTable.js
import React from "react";
// Import components from `@material-ui/core`
import ReactTableContainer from "react-table-container";

// Define `styles`

// Define `data`

function CustomMaterialUITableResizedWithFixedHeader(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <ReactTableContainer width="auto" height="200px" customHeader={[TableHead]}>
        <Table className={classes.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>
            { data.map(n => 
              <TableRow key={n.id}>
                <TableCell>{n.name}</TableCell>
                <TableCell numeric>{n.calories}</TableCell>
                <TableCell numeric>{n.fat}</TableCell>
                <TableCell numeric>{n.carbs}</TableCell>
                <TableCell numeric>{n.protein}</TableCell>
              </TableRow>
            ) }
          </TableBody>
        </Table>
      </ReactTableContainer>
    </Paper>
  );
}

export default withStyles(styles)(CustomMaterialUITableResizedWithFixedHeader);

Demo

Examples

API

<ReactTableContainer width height>

width: Any valid CSS value. Required.
height: Any valid CSS value. Required.
customHeader: List of table's direct child components that render thead and colgroup elements.
style: CSS-in-JS for the container itself.
className: CSS class name for the container itself.

scrollbarStyle: Object (below) to change the default scrollbar style.

{
  // How the container of the scrollbar should look like
  background: {
    /* Any valid CSS properties or empty */
  },
  // How the container should look like on mouse over
  backgroundFocus: {
    /* Any valid CSS properties or empty */
  },
  // How the scrollbar should look like
  foreground: {
    /* Any valid CSS properties or empty */
  },
  // How it should look like on mouse over
  foregroundFocus: {
    /* Any valid CSS properties or empty */
  }
}

REQUIRED
The table's header mustn't be transparent, otherwise the body content will appear under it on scroll.

Limitations

HTML caption table element is currently not supported. Using it might cause unexpected behaviour.

Contributing

Feel free to send pull requests for bug fixing. But make sure to run npm run prettify and npm run ci before doing so;
Please open an issue first for new features/ideas.