LP Table

A clean and responsive reflow table written in React.js and CSS. Using media queries to display a stacked view of the table on a mobile device.

Install

npm i lp-table

Descriptions

import LPTable from 'lp-table';

<LPTable
    variant='light' or 'dark'
    tableType='reflow' or 'collapse-rows'
    responsive=true or false
    style={Object of inline styles}
    ths={["Array of strings used for a table headers"]}
    headerCols={[Array of columns to use in the header (only needed for collapse-rows variant)]}
    rows={[Array of "<tr><td>Content</td></tr>" JSX objects]}
/>

Example

import LPTable from 'lp-table';

// Classic reflow table with light vairant table headers
<LPTable
    variant='light'
    tableType='reflow'
    responsive={true}
    ths={['Header 1', 'Header 2', 'Header 3']}
    rows={
        [
        <tr>
            <td data-title="Header 1">Col1</td>
            <td data-title="Header 2">Col2</td>
            <td data-title="Header 3">Col3</td>
        </tr>,
        <tr>
            <td data-title="Header 1">Col4</td>
            <td data-title="Header 2">Col5</td>
            <td data-title="Header 3">Col6</td>
        </tr>,
        <tr>
            <td data-title="Header 1">Col7</td>
            <td data-title="Header 2">Col8</td>
            <td data-title="Header 3">Col9</td>
        </tr>
        ]
    }
/>

// Collapsible row table with dark vairant table headers
<Table
  variant='dark'
  tableType='collapse-rows'
  responsive={true}
  ths={['Header 1', 'Header 2', 'Header 3']}
  headerCols={[0, 1]}
  rows={
    [
      <tr>
        <td data-title="Header 1" data-value="Col1">Col1</td>
        <td data-title="Header 2" data-value="Col2">Col2</td>
        <td data-title="Header 3">Col3</td>
      </tr>,
      <tr>
        <td data-title="Header 1" data-value="Col4">Col4</td>
        <td data-title="Header 2" data-value="Col5">Col5</td>
        <td data-title="Header 3">Col6</td>
      </tr>,
      <tr>
        <td data-title="Header 1" data-value="Col7">Col7</td>
        <td data-title="Header 2" data-value="Col8">Col8</td>
        <td data-title="Header 3">Col9</td>
      </tr>
    ]
  }
/>

Getting Started with Create React App

This project was bootstrapped with Create React App.