@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiTable

Package: @uireact/table

^v2.1.49

Used to render information in a table that is filterable and sortable.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/table

Installation

npm i @uireact/foundation @uireact/table

Usage

The table will render the data as you pass it in the data prop, no sort / filter will be applied till the user interacts with those elements.


  <UiTable
    bordered
    data={{
      headings: [{ label: 'No.' }, { label: 'Summary', sort: false } , { label: 'Price' }],
      items: [
        { id: '1', cols: [1, 'item 1', '$10'] },
        { id: '2', cols: [2, 'item 2', '$20'] },
        { id: '3', cols: [3, 'item 3', '$30'] },
        { id: '4', cols: [4, 'item 4', '$40'] },
        { id: '5', cols: [5, 'item 5', '$50'] },
        { id: '6', cols: [6, 'item 6', '$60'] },
        { id: '7', cols: [7, 'item 7', '$70'] },
        { id: '8', cols: [8, 'item 8', '$80'] },
        { id: '9', cols: [9, 'item 9', '$90'] },
        { id: '10', cols: [10, 'item 10', '$100'] },
      ],
    }}
    selected="3"
    onClick={(id) => {
      selected = id;
      console.log(`id ${id} selected`);
    }}
  />

If a row is selected and onClick prop is present then it will be executed

If you pass a selected id to the table that row will show as selected in the table

Stylizing

In the previous example we are using the prop bordered to display borders although is not enable by default given that tables are hard to stylized for multiple use cases. So, to stylized the table we recommend passing a className value, this will be attached to the Table element and you can style the table from there.

With category


  <UiTable
    data={{
      headings: [{ label: 'Summary'}, { label: 'Price'}],
      items: [{ id: '1', cols: ['item 1', '$10'] }],
    }}
    category="tertiary"
  />

With filter box position


  <UiTable
    data={{
      headings: [{ label: 'Summary'}, { label: 'Price'}],
      items: [{ id: '1', cols: ['item 1', '$10'] }],
    }}
    category="tertiary"
    filterBoxPosition="right"
  />

Removing filter and sort


  <UiTable
    data={{
      headings: [{ label: 'Summary'}, { label: 'Price'}],
      items: [{ id: '1', cols: ['item 1', '$10'] }],
    }}
    withFilter={false}
    withSort={false}
  />

Removing sort from a column


  <UiTable
    data={{
      headings: [{ label: 'Summary', sort: false}, { label: 'Price'}],
      items: [{ id: '1', cols: ['item 1', '$10'] }],
    }}
    withFilter={false}
    withSort={false}
  />

With a react component as part of the cols

This is useful when you want to render a component in each of the elements.


  <UiTable
    data={{
      headings: [{ label: 'Summary'}, { label: 'Price'}, { label: 'Actions', sort: false }],
      items: [
        { id: '1', cols: ['item 1', '$10', <UiIcon icon="Edit" />] },
        { id: '2', cols: ['item 2', '$20', <UiIcon icon="Edit" />] },
      ]
    }}
  />