ResponsiveTable

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

    View Source@fluidtruck/core

Import#

import {
  ResponsiveTable,
  RThead,
  RTbody,
  Tfoot,
  RTr,
  RTh,
  RTd,
} from '@fluidtruck/core'

Table Container#

The table container component renders a div that wraps the table component to not allow the table to overflow the parent container, not allow data content to break lines without exception, and enable horizontal scrolling.

It renders the following props:

PropertyValue
displayblock
maxWidth100%
overflowXauto
overflowYhidden
whiteSpacenowrap

It can optionally accept the overflow or overflowX props to override the overflowX default value of auto rendered by this component.

This component will be shown on all examples in this page. View the examples in mobile to see the effects.

Table Variants#

The table component comes in 3 variants: simple, striped, and unstyled. The default variant is simple

Change the variant values to see the other variants.

Simple Table#

<ResponsiveTable variant="simple">
  <RThead>
    <RTr>
      <RTh>To Convert</RTh>
      <RTh>Into</RTh>
      <RTh isNumeric>Multiply By</RTh>
    </RTr>
  </RThead>
  <RTbody>
    <RTr>
      <RTd>inches</RTd>
      <RTd>millimetres (mm)</RTd>
      <RTd isNumeric>25.4</RTd>
    </RTr>
    <RTr>
      <RTd>feet</RTd>
      <RTd>centimetres (cm)</RTd>
      <RTd isNumeric>30.48</RTd>
    </RTr>
    <RTr>
      <RTd>yards</RTd>
      <RTd>metres (m)</RTd>
      <RTd isNumeric>0.91444</RTd>
    </RTr>
  </RTbody>
</ResponsiveTable>

Striped Table#

<ResponsiveTable variant="simple">
    <RThead>
      <RTr>
        <RTh>To Convert</RTh>
        <RTh>Into</RTh>
        <RTh isNumeric>Multiply By</RTh>
      </RTr>
    </RThead>
    <RTbody>
      <RTr>
        <RTd>inches</RTd>
        <RTd>millimetres (mm)</RTd>
        <RTd isNumeric>25.4</RTd>
      </RTr>
      <RTr>
        <RTd>feet</RTd>
        <RTd>centimetres (cm)</RTd>
        <RTd isNumeric>30.48</RTd>
      </RTr>
      <RTr>
        <RTd>yards</RTd>
        <RTd>metres (m)</RTd>
        <RTd isNumeric>0.91444</RTd>
      </RTr>
    </RTbody>
</ResponsiveTable>

Table Sizing#

The table component is available in 3 sizes: sm, md, lg. The default size is md.

<ResponsiveTable variant="simple">
    <RThead>
      <RTr>
        <RTh>To Convert</RTh>
        <RTh>Into</RTh>
        <RTh isNumeric>Multiply By</RTh>
      </RTr>
    </RThead>
    <RTbody>
      <RTr>
        <RTd>inches</RTd>
        <RTd>millimetres (mm)</RTd>
        <RTd isNumeric>25.4</RTd>
      </RTr>
      <RTr>
        <RTd>feet</RTd>
        <RTd>centimetres (cm)</RTd>
        <RTd isNumeric>30.48</RTd>
      </RTr>
      <RTr>
        <RTd>yards</RTd>
        <RTd>metres (m)</RTd>
        <RTd isNumeric>0.91444</RTd>
      </RTr>
    </RTbody>
</ResponsiveTable>