Table - rafty/ui Docs

Table component is used to organize and display data efficiently. It renders a <table> element by default.

Table and its subcomponents are made upon native table components

Anatomy

Import all parts and piece them together.

import {TableContainer,Table,TableHead,TableBody,TableFooter,Tr,Th,Td} from "@rafty/ui";

  <TableContainer>
  <Table>
    <TableHead>
      <Tr>
        <Th/>
      </Tr>
    </TableHead>
    <TableBody>
      <Tr>
        <Td/>
      </Tr>
    <TableBody>
    <TableFooter/>
  </Table>
  </TableContainer>

Usage

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<Table>
  <TableHead>
    <Tr>
      <Th>
        To Convert
      </Th>
      <Th>
        Into
      </Th>
      <Th>
        Multiply By
      </Th>
    </Tr>
  </TableHead>
  <TableBody>
    <Tr>
      <Td>
        inches
      </Td>
      <Td>
        millimetres (mm)
      </Td>
      <Td>
        25.4
      </Td>
    </Tr>
    <Tr>
      <Td>
        feet
      </Td>
      <Td>
        centimetres (cm)
      </Td>
      <Td>
        30.48
      </Td>
    </Tr>
    <Tr>
      <Td>
        yards
      </Td>
      <Td>
        metres (m)
      </Td>
      <Td>
        0.91444
      </Td>
    </Tr>
  </TableBody>
  <TableFooter>
    <Tr>
      <Th>
        To Convert
      </Th>
      <Th>
        Into
      </Th>
      <Th>
        Multiply By
      </Th>
    </Tr>
  </TableFooter>
</Table>

TableContainer

It is a custom additional component used to enclose Table in a container.

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<TableContainer>
  <Table>
    <TableHead>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableHead>
    <TableBody>
      <Tr>
        <Td>
          inches
        </Td>
        <Td>
          millimetres (mm)
        </Td>
        <Td>
          25.4
        </Td>
      </Tr>
      <Tr>
        <Td>
          feet
        </Td>
        <Td>
          centimetres (cm)
        </Td>
        <Td>
          30.48
        </Td>
      </Tr>
      <Tr>
        <Td>
          yards
        </Td>
        <Td>
          metres (m)
        </Td>
        <Td>
          0.91444
        </Td>
      </Tr>
    </TableBody>
    <TableFooter>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableFooter>
  </Table>
</TableContainer>

Size

There are 3 size options in spinner: sm, md (default) & lg

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<TableContainer>
  <Table size="sm">
    <TableHead>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableHead>
    <TableBody>
      <Tr>
        <Td>
          inches
        </Td>
        <Td>
          millimetres (mm)
        </Td>
        <Td>
          25.4
        </Td>
      </Tr>
      <Tr>
        <Td>
          feet
        </Td>
        <Td>
          centimetres (cm)
        </Td>
        <Td>
          30.48
        </Td>
      </Tr>
      <Tr>
        <Td>
          yards
        </Td>
        <Td>
          metres (m)
        </Td>
        <Td>
          0.91444
        </Td>
      </Tr>
    </TableBody>
    <TableFooter>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableFooter>
  </Table>
</TableContainer>

Variant

There are 2 variants in the table: simple (default) & striped.

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<TableContainer>
  <Table variant="striped">
    <TableHead>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableHead>
    <TableBody>
      <Tr>
        <Td>
          inches
        </Td>
        <Td>
          millimetres (mm)
        </Td>
        <Td>
          25.4
        </Td>
      </Tr>
      <Tr>
        <Td>
          feet
        </Td>
        <Td>
          centimetres (cm)
        </Td>
        <Td>
          30.48
        </Td>
      </Tr>
      <Tr>
        <Td>
          yards
        </Td>
        <Td>
          metres (m)
        </Td>
        <Td>
          0.91444
        </Td>
      </Tr>
    </TableBody>
    <TableFooter>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableFooter>
  </Table>
</TableContainer>

Barebone

Pass isBarebone prop to remove all style in table.

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<TableContainer>
  <Table
    className="divide-secondary-300 dark:divide-secondary-700 min-w-full divide-y"
    isBarebone
  >
    <TableHead className="bg-secondary-100 dark:bg-secondary-700/80">
      <Tr>
        <Th className="text-secondary-600 dark:text-secondary-300 px-4 py-3 text-left text-sm font-semibold">
          To Convert
        </Th>
        <Th className="text-secondary-600 dark:text-secondary-300 px-4 py-3 text-left text-sm font-semibold">
          Into
        </Th>
        <Th className="text-secondary-600 dark:text-secondary-300 px-4 py-3 text-left text-sm font-semibold">
          Multiply By
        </Th>
      </Tr>
    </TableHead>
    <TableBody className="dark:bg-secondary-700/40 bg-white">
      <Tr>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          inches
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          millimetres (mm)
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          25.4
        </Td>
      </Tr>
      <Tr>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          feet
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          centimetres (cm)
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          30.48
        </Td>
      </Tr>
      <Tr>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          yards
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          metres (m)
        </Td>
        <Td className="text-secondary-600 dark:text-secondary-300 whitespace-nowrap px-4 py-3 text-sm">
          0.91444
        </Td>
      </Tr>
    </TableBody>
    <TableFooter className="bg-secondary-100 dark:bg-secondary-700/80">
      <Tr>
        <Th className="py-3text-secondary-600 dark:text-secondary-300 px-4 text-left text-sm font-semibold">
          To Convert
        </Th>
        <Th className="text-secondary-600 dark:text-secondary-300 px-4 py-3 text-left text-sm font-semibold">
          Into
        </Th>
        <Th className="text-secondary-600 dark:text-secondary-300 px-4 py-3 text-left text-sm font-semibold">
          Multiply By
        </Th>
      </Tr>
    </TableFooter>
  </Table>
</TableContainer>

UnStyled

Pass isUnstyled prop to remove style from a particular sub component.

To Convert	Into	Multiply By
inches	millimetres (mm)	25.4
feet	centimetres (cm)	30.48
yards	metres (m)	0.91444
To Convert	Into	Multiply By

<TableContainer>
  <Table>
    <TableHead
      className="bg-transparent"
      isUnstyled
    >
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableHead>
    <TableBody>
      <Tr>
        <Td>
          inches
        </Td>
        <Td>
          millimetres (mm)
        </Td>
        <Td>
          25.4
        </Td>
      </Tr>
      <Tr>
        <Td>
          feet
        </Td>
        <Td>
          centimetres (cm)
        </Td>
        <Td>
          30.48
        </Td>
      </Tr>
      <Tr>
        <Td>
          yards
        </Td>
        <Td>
          metres (m)
        </Td>
        <Td>
          0.91444
        </Td>
      </Tr>
    </TableBody>
    <TableFooter>
      <Tr>
        <Th>
          To Convert
        </Th>
        <Th>
          Into
        </Th>
        <Th>
          Multiply By
        </Th>
      </Tr>
    </TableFooter>
  </Table>
</TableContainer>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	`false`
isUnstyled	Removes Style from component	`string`	-

Head

Property	Description	Type	Default
isUnstyled	Removes Style from component	`string`	-

Body

Property	Description	Type	Default
isUnstyled	Removes Style from component	`string`	-

Tr

Property	Description	Type	Default
isUnstyled	Removes Style from component	`string`	-

Td

Property	Description	Type	Default
isUnstyled	Removes Style from component	`string`	-

Property	Description	Type	Default
isUnstyled	Removes Style from component	`string`	-