ReactTableContainer
A React component that wraps the HTML <table> element in a container of any specified dimensions
while keeping its header fixed to the top during scrolling.
Installation • Usage • Demo • API • Limitations • Contributing
Installation
npm install --save react-table-container
Usage
import React from "react";import ReactTableContainer from "react-table-container"; const CustomHTMLTableResizedWithFixedHeader = <ReactTableContainer ="auto" ="500px"> <table> <colgroup> <col ="1" ="" /> ... </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>; ;
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.jsimport React from "react";// Import components from `@material-ui/core`import ReactTableContainer from "react-table-container"; // Define `styles` // Define `data` { const classes = props; return <Paper => <ReactTableContainer ="auto" ="200px" => <Table => <TableHead> <TableRow> <TableCell></TableCell> <TableCell >Calories</TableCell> <TableCell ></TableCell> <TableCell ></TableCell> <TableCell ></TableCell> </TableRow> </TableHead> <TableBody> data </TableBody> </Table> </ReactTableContainer> </Paper> ;} stylesCustomMaterialUITableResizedWithFixedHeader;
Demo
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 renderthead
andcolgroup
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 likebackground:/* Any valid CSS properties or empty */// How the container should look like on mouse overbackgroundFocus:/* Any valid CSS properties or empty */// How the scrollbar should look likeforeground:/* Any valid CSS properties or empty */// How it should look like on mouse overforegroundFocus:/* 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
andnpm run ci
before doing so; - Please open an issue first for new features/ideas.