React Sticky Table

Responsive and dynamically-sized fixed headers and columns for tables inspired by fixed-data-table's lack of responsiveness.

View demo Download Source

Features

  • Any number of fixed columns & headers
  • Responsive table dimensions (wrap it in any size container and it will fill that container)
  • Dynamic row height & column width (no need to specify width and height in pixels)
  • Table rows/columns resize as content resizes
  • Custom cells (just make sure your custom cell has display: table-cell set)
  • Multiple tables per page
  • Scrollbars that are smooth and visible at all times
  • Native vertical scrolling
  • 0 dependencies

Doesn't yet support

  • Client side sorting
  • IE <= 7

Getting Started

Install react-sticky-table using npm.

npm install react-sticky-table --save

Make sure you import the mandatory stylesheet: react-sticky-table/dist/react-sticky-table.css. It should be unobtrusive.

Example

import React, { Component } from 'react';

import { StickyTable, Row, Cell } from 'react-sticky-table';
import 'react-sticky-table/dist/react-sticky-table.css';

export default class BasicExample extends Component {
  render() {
    return (
      <div>
        <div style={{width: '100%', height: '400px'}}>
          <StickyTable>
            <Row>
              <Cell>Header 1</Cell>
              <Cell>Header 2</Cell>
            </Row>
            <Row>
              <Cell>Cell 1</Cell>
              <Cell>Cell 2</Cell>
            </Row>
          </StickyTable>
        </div>
      </div>
    );
  }
}

Options

  • stickyHeaderCount: default: 1, value: any integer >= 0
  • stickyColumnCount: default: 1, value: any integer >= 0

Disable sticky header:

<StickyTable stickyHeaderCount={0}>

Disable sticky column:

<StickyTable stickyColumnCount={0}>

Events

Scroll event:

<StickyTable onScroll={event => {}}>

Scroll event object:

{
  scrollTop: 0,
  scrollHeight: 2304,
  clientHeight: 259,
  scrollLeft: 0,
  scrollWidth: 27953,
  clientWidth: 887
}

GitHub