Table

The component presents data distributed in lines and columns, displaying them in a logical order that allows easy reading, comparison and scan of the information.

Best practices

Columns where ordinating is possible, should present the sort icon in the right side of the label.
The Paginator component must be presented only for large data sets.

Data table

A table that automatically generates rows based on columns prop and gives support to sorting and loading state.

ID	Name	Age
1	MARIA MACHADO DE JESUS	42
2	JOSÉ DA SILVA MOREIRA	34
3	ALICE BARBOSA	27
4	MARIA MACHADO DE JESUS	42
5	JOSÉ DA SILVA MOREIRA	34
6	ALICE BARBOSA	27
7	MARIA MACHADO DE JESUS	42
8	JOSÉ DA SILVA MOREIRA	34
9	ALICE BARBOSA	27

import { Button, DataTable, Icon } from '@lemonade/ui'
import React, { useState } from 'react'

interface RowType {
  id: number
  name: string
  age: number
}

function DataTableExample() {
  const [sort, setSort] = useState(['id'])

  const rows = allRows
    // Naive sorting for example purposes:
    .sort((a, b) => {
      if (sort[0] === 'id') {
        return a.id - b.id
      }
      if (sort[0] === '-id') {
        return b.id - a.id
      }
      return 0
    })

  return (
    <DataTable<RowType>
      rows={rows}
      sort={sort}
      onSortChange={setSort}
      loading={false}
      columns={[
        {
          name: 'id',
          header: 'ID',
          sortable: true,
          render: item => item.id,
        },
        {
          name: 'name',
          header: 'Name',
          render: item => item.name,
        },
        {
          name: 'age',
          header: 'Age',
          render: item => item.age,
        },
        {
          name: 'actions',
          align: 'right',
          render: item => (
            <Button size='small' skin='ghost'>
              <Icon icon='penOutline' />
            </Button>
          ),
        },
      ]}
    />
  )
}

export default DataTableExample

// Fake data to populate table
let id = 1
const allRows: RowType[] = Array(3)
  .fill(true)
  .reduce(
    curr => [
      ...curr,
      { id: id++, name: 'MARIA MACHADO DE JESUS', age: 42 },
      { id: id++, name: 'JOSÉ DA SILVA MOREIRA', age: 34 },
      { id: id++, name: 'ALICE BARBOSA', age: 27 },
    ],
    [] as RowType[]
  )

Paged table

A DataTable that includes a pagination component on the footer.

ID	Name	Age
1	MARIA MACHADO DE JESUS	42
2	JOSÉ DA SILVA MOREIRA	34
3	ALICE BARBOSA	27
4	MARIA MACHADO DE JESUS	42
5	JOSÉ DA SILVA MOREIRA	34
6	ALICE BARBOSA	27
7	MARIA MACHADO DE JESUS	42
8	JOSÉ DA SILVA MOREIRA	34
9	ALICE BARBOSA	27
10	MARIA MACHADO DE JESUS	42

90 results

Mostrar:

of 9

import { Button, Icon, PagedTable } from '@lemonade/ui'
import React, { useState } from 'react'

interface RowType {
  id: number
  name: string
  age: number
}

function PagedTableExample() {
  const [params, setParams] = useState({
    page: 0,
    size: 10,
    totalElements: allRows.length,
    totalPages: allRows.length / 10,
    sort: ['id'],
  })

  const handleSortChange = (sort: string[]) => setParams(state => ({ ...state, sort }))
  const handlePageChange = (page: number) => setParams(state => ({ ...state, page }))
  const handleSizeChange = (size: number) =>
    setParams(state => ({ ...state, size, totalPages: Math.max(1, Math.ceil(state.totalElements / size)) }))

  const rows = allRows
    // Naive sorting for example purposes:
    .sort((a, b) => {
      if (params.sort[0] === 'id') {
        return a.id - b.id
      }
      if (params.sort[0] === '-id') {
        return b.id - a.id
      }
      return 0
    })
    // Naive pagination for example purposes:
    .slice(params.page * params.size, params.page * params.size + params.size)

  return (
    <PagedTable<RowType>
      rows={rows}
      page={params.page}
      size={params.size}
      totalElements={params.totalElements}
      totalPages={params.totalPages}
      sort={params.sort}
      onSortChange={handleSortChange}
      onPageChange={handlePageChange}
      onSizeChange={handleSizeChange}
      loading={false}
      columns={[
        {
          name: 'id',
          header: 'ID',
          sortable: true,
          render: item => item.id,
        },
        {
          name: 'name',
          header: 'Name',
          render: item => item.name,
        },
        {
          name: 'age',
          header: 'Age',
          render: item => item.age,
        },
        {
          name: 'actions',
          align: 'right',
          render: item => (
            <Button size='small' skin='ghost'>
              <Icon icon='penOutline' />
            </Button>
          ),
        },
      ]}
    />
  )
}

export default PagedTableExample

// Fake data to populate table
let id = 1
const allRows: RowType[] = Array(30)
  .fill(true)
  .reduce(
    curr => [
      ...curr,
      { id: id++, name: 'MARIA MACHADO DE JESUS', age: 42 },
      { id: id++, name: 'JOSÉ DA SILVA MOREIRA', age: 34 },
      { id: id++, name: 'ALICE BARBOSA', age: 27 },
    ],
    [] as RowType[]
  )