Readme
React components for creating fixed column tables. These components render normal HTML tables and can be used as such.
Installing
yarn add react-fixed-column-table
- (or)
npm i -S react-fixed-column-table
.
Using
With webpack:
import { Table, Tbody, Tr, Th, Td } from 'react-fixed-column-table';
import 'react-fixed-column-table/dist/styles.css';
The <Table>
component takes 3 props:
- numLeftFixedColumns - The number of columns that should be fixed on the left side of the table.
Eg. to make the 1st and 2nd column fixed specify
2
- columnWidths - An array containing the width of each of the fixed column. Each item in the array must be a string (eg
'120px' or '4em'
) as these are passed intocalc()
internally. - totalBorderWidth - A string describing the combined width of the horizontal borders in the fixed columns. By default
border-collapse
is set to true, so if the 1st column had a2px
border, and the 2nd had a1px
- you would pass in3px
here.
Example
import { Table, Tbody, Tr, Th, Td } from 'react-fixed-column-table';
class Example extends React.Component {
render() {
return (
<Table numLeftFixedColumns={2} columnWidths={['160px', '150px']} totalBorderWidth="3px">
<Tbody>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
<Th>Column 4</Th>
<Th>Column 5</Th>
<Th>Column 6</Th>
</Tr>
<Tr>
<Td>Lorem<br /> Ipsum<br />Dolor</Td>
<Td>Ipsum</Td>
<Td>Dolor</Td>
<Td>Sit</Td>
<Td>Amet</Td>
<Td>Consecuteur</Td>
</Tr>
<Tr>
<Td>Lorem</Td>
<Td>Ipsum</Td>
<Td>Dolor</Td>
<Td>Sit</Td>
<Td>Amet</Td>
<Td>Consecuteur</Td>
</Tr>
<Tr>
<Td>Lorem</Td>
<Td>Ipsum</Td>
<Td>Dolor</Td>
<Td>Sit</Td>
<Td>Amet</Td>
<Td>Consecuteur</Td>
</Tr>
</Tbody>
</Table>
);
}
}