table

import { Table } from "woly";

To create a table use Table, Thead, Tbody, Th, Tr, Td components. To set number of columns pass columns prop to the Table component.

Example

IdFirst nameLast nameEmailCountryStreetDateRoleContentPhone
1MichaelSmith[email protected]Portugal9 Eliot Parkway19.03.2015AdminInformation about user+35118456395
2JonathanKearney[email protected]Portugal4 Sloan Park19.03.2015AdminInformation about user+35118456395
3DonaldMorrison[email protected]PortugalSherman19.03.2015AdminInformation about user+35118456395
4TaraRichardson[email protected]PortugalJudy Court19.03.2015AdminInformation about user+35118456395
<Playground>
  <block.L style={{ background: '#f5f5f5', padding: 24 }}>
    <Table columns={tableHead.length} priority="primary">
      <Thead>
        <Tr>
          {tableHead.map(({ id, name }) => (
            <Th key={id}>{name}</Th>
          ))}
        </Tr>
      </Thead>
      <Tbody>
        {tableRows.map((row, key) => (
          <Tr key={key}>
            {tableHead.map(({ id }) => (
              <Td key={id}>{row[id]}</Td>
            ))}
          </Tr>
        ))}
      </Tbody>
    </Table>
  </block.L>
</Playground>

Components

NameDescription
TableTable component
TbodyBody of table
TdCell of table
ThHead cell of table
TheadHead of table
TrRow of table

Table Props

NameTypeDefaultDescription
childrenReact.ReactNodePass any content as a children property within Table component.
columnsnumberNumber of columns in table
prioritystring'secondary'Priority prop to style Table component