Table

Example

Username	Full Name	Email
chardywang	Chardy Wang	chardy@gmail.com
wendywang	Wendy Wang	wendy@gmail.com
kellyswee	Kelly Swee	kelly@gmail.com

Code


    import React from "react"
    import { Table, Th, Tr, Td } from 'components/ui/Table'

    <Table className="my-className">
      <thead>
        <Tr>
          <Th>Username</Th>
          <Th>Full Name</Th>
          <Th>Email</Th>
        </Tr>
      </thead>
      <tbody>
        <Tr>
          <Td>chardywang</Td>
          <Td>Chardy Wang</Td>
          <Td>chardy@gmail.com</Td>
        </Tr>
        <Tr>
          <Td>wendywang</Td>
          <Td>Wendy Wang</Td>
          <Td>wendy@gmail.com</Td>
        </Tr>
        <Tr>
          <Td>kellyswee</Td>
          <Td>Kelly Swee</Td>
          <Td>kelly@gmail.com</Td>
        </Tr>
      </tbody>
    </Table>

With sorting

Username	Full Name	Email
chardywang	Chardy Wang	chardy@gmail.com
wendywang	Wendy Wang	wendy@gmail.com
kellyswee	Kelly Swee	kelly@gmail.com

Code


    import React from "react"
    import { Table, Th, Tr, Td } from 'components/ui/Table'

    <Table className="my-className">
      <thead>
        <Tr>
          <Th sort="ASC">Username</Th>
          <Th>Full Name</Th>
          <Th>Email</Th>
        </Tr>
      </thead>
      <tbody>
        <Tr>
          <Td>chardywang</Td>
          <Td>Chardy Wang</Td>
          <Td>chardy@gmail.com</Td>
        </Tr>
        <Tr>
          <Td>wendywang</Td>
          <Td>Wendy Wang</Td>
          <Td>wendy@gmail.com</Td>
        </Tr>
        <Tr>
          <Td>kellyswee</Td>
          <Td>Kelly Swee</Td>
          <Td>kelly@gmail.com</Td>
        </Tr>
      </tbody>
    </Table>