react-table-fast

A library to render HTML tables with advanced features.

Install

npm install --save react-table-fast

or

yarn add react-table-fast

Usage

1. Create a container to position the table
2. In the header, associate the column names to the data attributes
3. In the body, just set the data to show
4. In the footer (optional), you can apply aggregation function as SUM, AVG or CNT (count)

import React from "react"

import { TableFast, TableHeader, TableBody, TableFooter, TableAggregationFunctions, TableFormats } from "react-table-fast"

const App = () => {
  return (
    <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

      <TableFast
        filterable
        style={{ width: 600 }}
        className="highlight"
      >
        <TableHeader
          columns={[
            { name: 'Name', attr: 'name' },
            { name: 'Age', attr: 'age' },
            { name: 'Amount', attr: 'amount', format: TableFormats.currency }
          ]}
        />

        <TableBody
          data={[
            { id: 1, name: 'Felipe', age: 31, amount: 1280.45 },
            { id: 2, name: 'Ana', age: 24, amount: 1470.13 },
            { id: 3, name: 'João', age: 32, amount: 2170.77 },
            { id: 4, name: 'Pedro', age: 29, amount: 1421.8 }
          ]} />

          <TableFooter
            columns={[
              { text: 'TOTAL', colspan: 2 },
              {
                calculate: {
                  type: TableAggregationFunctions.SUM,
                  attr: 'amount',
                  format: TableFormats.currency
                }
              }
            ]}
          />
      </TableFast>

    </div>
  )
}

export default App

Expected result:

It's possible to define an action by clicking on a table row using the handleRowClick attribute being passed to the TableBody component, as below:

<TableBody
  data={[
    { id: 1, name: 'Name 1', age: 31, amount: 1280.45 },
    { id: 2, name: 'Name 2', age: 24, amount: 1470.13 },
    { id: 3, name: 'Name 3', age: 32, amount: 2170.77 },
    { id: 4, name: 'Name 4', age: 29, amount: 553.8 },
    { id: 5, name: 'Name 5', age: 43, amount: 1683.8 },
    { id: 6, name: 'Name 6', age: 20, amount: 778.8 },
    { id: 7, name: 'Name 7', age: 56, amount: 344.8 }
  ]}
  handleRowClick={row => {
    console.log(`${row.name}'s row has clicked!`)
  }}
/>

API Reference

<TableFast>

It is a wrapper, containing all other components.

| Attribute | Default | Type | |:----------: |:-------: |:-------: | | filterable | false | boolean | | className | '' | string | | style | {} | object |

<TableBody>

Contains all the data to be listed.

| Attribute | Default | Type | |:----------------: |:---------: |:--------: | | data | null | array | | handleRowClick | undefined | function | | deletion | undefined | {} | | deletion.handler | undefined | function | | deletion.effect | undefined | fadeOut |

<TableHeader>

Contains table headings, with parameterized titles and sorting action.

| Attribute | Default | Type | |:---------: |:---------: |:-------: | | columns | undefined | array | | sortable | true | boolean | | style | {} | object | | className | '' | string |

<TableFooter>

It can display the sum of a given numeric column, the total number of records or an arithmetic mean, through the aggregation functions available in the TableAggregationFunctions component.

| Attribute | Default | Type | |:---------: |:---------: |:------: | | columns | undefined | array | | style | {} | object | | className | '' | string |

TableAggregationFunctions

Provides some aggregation functions to be used in conjunction with the TableFooter component.

| Constant | Implements | |:--------: |:------------------------------------------: | | AVG | Arithmetic mean over the specified column. | | SUM | The summation over the specified column. | | CNT | The total number of rows. |

TableHoverEffects

Provides some hover effects for action icons.

| Effect | |:-------: | | ROTATE | | SCALE | | OPACITY |

TableFormats

It must be used within the objects contained in the date, passed to the THeader component. It provides some common masks that will be applied to all values in the specified column.

| Mask | |:-------: | | currency | | avatar | | component |

License

MIT © felipeleite11