fixed-html-table v2.0.2

DEPRECATION NOTICE: This project as been forked and renamed to ReactTableContainer. Go to the new project ReactTableContainer where development will continue from there.

FixedHtmlTable

A React component wrapper for the HTML \<table> element that allows it to be of any specified dimensions while locking its header during scrolling.

Motivation

Sometimes, you need your \<table> element to have a specific height and width to fit in an area of your page, without having the tabular data within the element affecting these required dimensions, nor these dimensions affecting the layout of this element. Also, the \<thead> element should ideally remain fixed/locked as you scroll down the data, so the context is not lost.

This is what this React component aims to solve.

Installation

npm install --save fixed-html-table

Usage

import FixedHtmlTable from 'fixed-html-table';

class MyTable extends Component {
  render() {
    return (
      <FixedHtmlTable width="auto" height="500px">
        <table>
          <thead>
            <tr>
              <th>Header cell</th>
              ...
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Body cell</td>
              ...
            </tr>
            <tr>
              <td>Body cell</td>
              ...
            </tr>
            ...
          </tbody>
        </table>
      </FixedHtmlTable>
    );
  }
}

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

Options

• width: Any valid CSS value. Required.
• height: Any valid CSS value. Required.
• scrollbarStyle: Object (below) to change the default scrollbar style. Optional.

  {
    // 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 */
    }
  }

Contributing

• The code base is written using TypeScript;
• Feel free to send pull requests for bug fixing. But make sure you run npm run lint and npm run prettify before;
• Please open an issue first for new features/ideas.

License

MIT