yeti-table v0.2.4

Simple Table Component for React

Features

• Display Values like you want, even add behavior to it or just use an string accessor
• Sort with default or custom Algorithms
• Fully customizable with Props and Callbacks
• Easy and fast Table Markup
• Light in filesize, current build is only 6kb small
• 100% Open Source and Free to use
• Optional factory styling

Example

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Table, Column, CellProps } from 'yeti-table';

let data = [
    { name: 'John Cenedy', birthday: new Date(1998, 5, 30), street: 'Musterstrasse', streetNr: 15 },
    { name: 'Simon Maier', birthday: new Date(2000, 1, 14), street: 'Joachimstrasse', streetNr: '2b' },
    { name: 'Lea Wagner', birthday: new Date(1980, 7, 24), street: 'Bäckeralle', streetNr: 63 },
];

const AddressCell : React.StatelessComponent<CellProps> = (props) => <span>
    { props.value.street + ' ' + props.value.streetNr }
</span>;

const App : React.StatelessComponent<any> = (props) => <div>
    <Table data={ data } sortable={ true }>
        <Column 
            header='Name'
            accessor='name' />
        <Column 
            header='Age'
            accessor='birthday'
            getValue={ (birthday) => Math.abs(new Date(Date.now() - birthday.getTime()).getUTCFullYear() - 1970).toString() } />
        <Column 
            header='Address'
            cell={ AddressCell } />
    </Table>
</div>;

ReactDOM.render(<App/>, document.getElementById("app"));

Configuration

Table

Columns

Each Column is represented by a Column Element inside the Table Body.

Factory Styling

To use the provided styling, you need to import the yeti-table/styling module. It will automaticly add all styling to your html markup. You then need can use the factory styling like any other styling object.

...
import { Table, Column } from 'yeti-table';
import { YetiDefaultStyling } from 'yeti-table/styling';  
...
<Table data={ ... } styling={ YetiDefaultStyling }>
    <Column header='Example' />
</Table>
...

Installation

Via Npm

$ npm i -s yeti-table

Then

// ES6
import { Table, Column } from 'yeti-table';
// ES5
var YetiTable = require('yeti-table');

Documentation

Styling

To add your own styling to table you can use the styling prop from the table component. The styling prop requires a value of type styling. The type looks like the following:

export type Styling = {
    tableRoot? : string
    tableBody? : string
    tableBodyRow? : string
    tableBodyColumn? : string
    tableBodyCell? : string
    tableHeader? : string
    tableHeaderRow? : string
    tableHeaderColumn? : string
    tableHeaderCell? : string
}

Here is an example how you use this prop.

...
<Table styling={{
    tableRoot: 'mytable',
    tableHeader: 'header'
}}>
...

.mytable {
    background-color: red;
}
.header {
    background-color: blue;
}

Custom Column Types

You can create custom Column Types with custom Behavior. For Example let's assume you need a Column which allways adds a red Background to the Column. The usage of this Column whould look similar to this.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Table, Column } from 'yeti-table';
import { RedColumn } from './redColumn';

let data = [
    { model: 'IPhone X', price: 1000 },
    { model: 'Huawei P20', price: 300 },
    { model: 'Nokia 8110 4G', price: 100 },
    { model: 'Samsung Galaxy S9', price: 800 },
];

const App : React.StatelessComponent<any> = (props) => <div>
    <Table data={ data } sortable={ true }>
        <Column 
            header='Smartphone'
            accessor='model' />
        <RedColumn 
            header='Price'
            accessor='price'
            getValue={ (price) => <a>{ price } $</a> } />
    </Table>
</div>;

ReactDOM.render(<App/>, document.getElementById("app"));

As you can see in the example. We are not using the Column for our Red Column, we use the RedColumn Component. This instructs yeti-table to use a custom Component for rendering this Column. Now let's take a look at redColumn.ts:

import * as React from 'react';
import { Column, TableBodyColumnProps, TableBodyCell } from 'yeti-table';

const RedColumnComponent : React.StatelessComponent<TableBodyColumnProps> = (props) => <td style={ { backgroundColor: 'red' } }>
    <TableBodyCell context={ props.context } column={ props.column } row={ props.row } /> // Needed for drawing the cell.
</td>;

export class RedColumn extends Column {
    public static bodyColumn = RedColumnComponent; // Important part, can be any type of stateless component.
}

The result will look like this:

Planned Features

• Styling each component via prop.
• Default styling.
• Sortable with equal algorithm.
• Sortable with custom algorithm.
• Customizable indicator for sort.
• Data from remote URL. Request Data automaticly from Backend.
• Filter data with function.
• Filter data with props.
• Filter data with custom form.
• Filter in comination with remote URL. Remote filtering with Query Parameter.
• Plugin System
• Use other types of Columns.

Plugin System

• Plugins can replace or add to individual components.
• Plugins can hook on events with callbacks.
• User can use individual components from Plugins to replace specific components. (Similar to current cell system)