1.0.2 • Published 4 years ago
table-with-sticky-columns v1.0.2
table-with-sticky-columns
React custom table with sticky columns and headers
By default first row is considered as header for table and its sticked to top of the table
npm i --save table-with-sticky-columns
You can find the example in example folder and test this library
cd example
npm i
npm start
if you want to stick a column on the left side while scrolling then you have to configure
stickyColumns
prop as shown bellow.
const tableData={
stickyColumns: {
1: { left: 0 },
3: { left: 0 },
7: { left: 0 },
}
}
Full Usage example
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { getNewRows } from './mockData'
import { Table } from 'table-with-sticky-columns'
import './styles.css'
const rows=[
['header 1', 'header 2', .... 'header 20' ],
['row:1 col:1', 'row:1 col:2', ..... 'row 1 col:20'],
....
['row:100 col:1', 'row:100 col:2', ..... 'row 100 col:20']
]
const emptyRows = [
['empty 1','empty 2', .... 'empty 20'],
['empty 1','empty 2', .... 'empty 20']
]
function App() {
const [extraRows, setExtraRows] = useState([])
const tableData = {
stickyColumns: {
1: { left: 0 },
3: { left: 0 },
7: { left: 0 },
},
rows,
emptyRows,
}
const onHitScrollBottom = () => {
getNewRows({
start: rows.length + extraRows.length,
length: 10,
columns: tableData.rows[0].length,
}).then(newRows => {
setExtraRows([...extraRows, ...newRows])
})
}
return (
<div className="App">
<Table
tableData={tableData}
extraRows={extraRows}
onHitScrollBottom={onHitScrollBottom}
/>
</div>
)
}
in ./style.css
* {
box-sizing: border-box;
}
.App {
font-family: sans-serif;
text-align: center;
}
.custom-table {
height: 300px;
width: 514px;
}