1.0.6 • Published 4 years ago
react-sticky-table-thead v1.0.6
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