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 into calc() 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 a 2px border, and the 2nd had a 1px - you would pass in 3px 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>
        );
    }
    
}