react-sticky-table-thead

Easy to use wrapper component to enable fixed table head in tables

Install

npm install --save react-sticky-table-thead

Or

yarn add react-sticky-table-thead

Usage

import React, { Component } from "react"

import StickyTable from "react-sticky-table-thead"

class Example extends Component {
  render() {
    return (
      <div style={{width:250}}> {/* container width optional */}
        <StickyTable height={150}> {/* when content exceeds height of table wrapper content scrolling is enabled */}
          <table style={{width:"100%", borderCollapse:"collapse"}}> {/* any table */}
            <thead style={{backgroundColor:"#c0c0c0"}}>
              <tr>
                <th>Item</th>
                <th>Price (TZS)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Onion</td>
                <td>200</td>
              </tr>
              <tr>
                <td>Tomato</td>
                <td>200</td>
              </tr>
              <tr>
                <td>Orange</td>
                <td>200</td>
              </tr>
              <tr>
                <td>Banana</td>
                <td>200</td>
              </tr>
              <tr>
                <td>Passion</td>
                <td>300</td>
              </tr>
              <tr>
                <td>Mango</td>
                <td>300</td>
              </tr>
              <tr>
                <td>Apple</td>
                <td>500</td>
              </tr>
              <tr>
                <td>Avocado</td>
                <td>500</td>
              </tr>
              <tr>
                <td>Guava</td>
                <td>600</td>
              </tr>
              <tr>
                <td>Papaya</td>
                <td>800</td>
              </tr>
              <tr>
                <td>Watermelon</td>
                <td>1,000</td>
              </tr>
              <tr>
                <td>Pineapple</td>
                <td>1,000</td>
              </tr>
            </tbody>
          </table>
        </StickyTable>
      </div>
    )
  }
}

Props

| Prop | Explanation | Data Type | (Sample) Values | Default | | ------------- | :-: | :-: | :-: | :-: | | height | height of table wrapper | Number | * 200* 800 | 450 | | hiddenVerticalScrollbar | hide the table vertical scrollbar (scrolling will still be enabled) | Bool | * true* false | false | | hiddenHorizontalScrollbar | hide table horizontal scrollbar (scrolling will still be enabled) | Bool | * true* false | false | | className | table wrapper class (useful for setting table responsiveness: .table-responsive) | String | * ".css-class"* ".table-responsive" | "" |

License

MIT © BossBele