Table

O componente apresenta dados distribuídos em linhas e colunas, apresentando-os de uma forma que permite uma fácil leitura, comparação e escaneamento das informações.

Boas práticas

Colunas onde é possível fazer a ordenação devem apresentar o ícone de ordenação ao lado direito da label.
O Paginator só deve ser apresentado quando há paginação (mais de 10 itens).

Tabela de dados

Uma tabela que gera automaticamente linhas com base na propriedade de columns e dá suporte ao estado de ordenação e estados de carregamento.

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[]
  )

Tabela paginada

Uma Tabela de dados que inclui um componente de paginação no rodapé.

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[]
  )