Table

() => {
  const [selectedItems, setSelectedItems] = useState([])

  const columns = useMemo(
    () => [
      {
        Header: 'Cliente', // Label exibido no cabeçalho da tabela
        accessor: 'client', // ID das células dessa coluna
        align: 'left', // Alinhamento da coluna (left, right, center)
        width: '10%' // Largura da coluna (int ou %)
      },
      {
        Header: 'Email',
        accessor: 'email',
        align: 'right'
      },
      {
        accessor: 'valor',
        align: 'right',
        hideSort: true, // Desabilita o sorting da coluna
        width: '5%',
        Cell: ({ row }) => <div>{row.values.id}</div>
      },
      {
        Header: 'ID',
        accessor: 'id',
        hidden: true // Esconde a coluna na tabela
      }
    ],
    []
  )

  const data = useMemo(
    () => [
      {
        client: 'Diogo',
        email: 'diogo@superlogica.com',
        valor: '9900',
        id: 1
      },
      {
        client: 'Henrique',
        email: 'henrique@superlogica.com',
        valor: '800',
        id: 2
      },
      {
        client: 'Wilson',
        email: 'wilson@superlogica.com',
        valor: '1800',
        id: 3
      },
      {
        client: 'Hugo',
        email: 'hugo@superlogica.com',
        valor: '1400',
        id: 4
      }
    ],
    []
  )

  const Footer = (
    <Box className="flex align-center">
      <Text size="body02" color="neutral800" align="right">
        Listando {data.length} items / {selectedItems.length}
        {` ${selectedItems.length > 1 ? 'selecionados' : 'selecionado'}`}
      </Text>
      <Button size="sm" className="ml-auto">
        Ação
      </Button>
    </Box>
  )

  return (
    <>
      <Table
        retry={() => alert('tentou de novo')}
        footer={Footer}
        data={data}
        columns={columns}
        loadingRows={2}
        tableName="Table Example"
        onSelectionChange={setSelectedItems} // Importante usar uma função que esteja memoizada
      />
      <pre>
        <code>
          Itens selecionados: {JSON.stringify(selectedItems, null, 4)}
        </code>
      </pre>
    </>
  )
}