@congritta-ui/table v0.0.1

@congritta-ui/table

This is table React component and part of Congritta UI

Contains two components to create responsive or not responsive, row tables

How to install

1. Install @congritta-ui/base if you didn't it yet. (More info at: http://ui.congritta.com/docs/base);
2. Install @congritta-ui/data-rows if you didn't it yet. (More info at: http://ui.congritta.com/docs/data-rows);
3. Install @congritta-ui/table;

Add

// You can import it only once at entry point file of your project
import '@congritta-ui/table/dist/table.css';

import {ResponsiveTable, NotResponsiveTable} from '@congritta-ui/table';

into your code.

You can restyle table by your CSS. Use regular table selectors

How to use

Not responsive table

Example:

<NotResponsiveTable>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr className='_isHoverable'>
        <td>Alex</td>
        <td>23</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>23</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>23</td>
        <td>Male</td>
      </tr>
    </tbody>
  </table>
</NotResponsiveTable>

You can operate with table as you want. No limitations.

You can set style={{minWidth: 1000}} property to <table> element

Responsive table

Example:

<ResponsiveTable
  headers={['Name', 'Age', 'Gender']}
  rows={[
    ['Alex', '24', 'Male'],
    ['Alex', '24', 'Male'],
    ['Alex', '24', 'Male']
  ]}
  mediaWidth={1000}
/>

Props for ResponsiveTable component