just-table v0.3.4

just-table

A simple React table component that just works.

https://github.com/arnell0/just-table

example

import Table from 'just-table';

const data = [
    {
        'id': 1,
        'name': 'John',
        'surname': 'Doe',
        'age': 25,
    },
    {
        'id': 2,
        'name': 'Jane',
        'surname': 'Doe',
        'age': 23,
    },
    {
        'id': 3,
        'name': 'John',
        'surname': 'Smith',
        'age': 30,
    },
    {
        'id': 4,
        'name': 'Jane',
        'surname': 'Smith',
        'age': 28,
    },
]

// columns can be generated from data keys (camel case, underscore, dash) if autoGenerateColumns is true or columns can be provided manually

// with autoGenerateColumns
const JustTable = () => <Table data={data} /> // yes it's that simple


// with columns
const columns = [
    'id',
    'name',
    'surname',
    'age',
]

const JustTable = () => <Table data={data} columns={columns} />

styling

Styling is simple, if you want to style table, you can pass styled prop to table component and it will be styled with base styling. If you want to style table yourself, you can target the native HTML elements under the class "just-table" eg.

.just-table > table > tr > td {
    padding: 10px;
}

classes:

• just-wrapper
• just-table

TODO

• pagination
• search
• style serach
• rows per page
• sticky header and footer
• sort columns
• onRowClick
• onRowCreate
• onColumnClick
• onColumnCreate
• base styling setting
• select rows
• filter columns
• change all buttons to icons if user sets icons=true
• virtualize
• handle nested data