Table is a set of stateless components to render tables. Based on HTMLTable components.

Usage

Import

import { Table } from '@passfort/castle'
content_copy
Copy

Example

<Table>
  <Table.Header>
    <Table.Column title="Column 1" />
    <Table.Column title="Column 2" />
    <Table.Column title="Column 3" />
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Row 1, Cell 1</Table.Cell>
      <Table.Cell>Row 1, Cell 2</Table.Cell>
      <Table.Cell>Row 1, Cell 3</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Row 2, Cell 1</Table.Cell>
      <Table.Cell>Row 2, Cell 2</Table.Cell>
      <Table.Cell>Row 2, Cell 3</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Row 3, Cell 1</Table.Cell>
      <Table.Cell>Row 3, Cell 2</Table.Cell>
      <Table.Cell>Row 3, Cell 3</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
<Table>
  <Table.Header>
    <Table.Column title="Column 1" />
    <Table.Column title="Column 2" />
    <Table.Column title="Column 3" />
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Row 1, Cell 1</Table.Cell>
      <Table.Cell>Row 1, Cell 2</Table.Cell>
      <Table.Cell>Row 1, Cell 3</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Row 2, Cell 1</Table.Cell>
      <Table.Cell>Row 2, Cell 2</Table.Cell>
      <Table.Cell>Row 2, Cell 3</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Row 3, Cell 1</Table.Cell>
      <Table.Cell>Row 3, Cell 2</Table.Cell>
      <Table.Cell>Row 3, Cell 3</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
content_copy
Copy
live example

Selectable

You can toggle select all by setting onSelectAll. Selecting of the rows is possible only if onSelect prop exists on the row. You can also set the initial isSelected property.

<Table onSelectAll={() => console.log('Selected all')}>
  <Table.Header>
    <Table.Column title="Column 1"></Table.Column>
    <Table.Column title="Column 2"></Table.Column>
    <Table.Column title="Column 3"></Table.Column>
  </Table.Header>

  <Table.Body>
    <Table.Row isSelected onSelect={() => console.log('Selected Row 1')}>
      <Table.Cell>Item 1</Table.Cell>
      <Table.Cell>Item 2</Table.Cell>
      <Table.Cell>Item 3</Table.Cell>
    </Table.Row>
    <Table.Row onSelect={() => console.log('Selected Row 2')}>
      <Table.Cell>Item 4</Table.Cell>
      <Table.Cell>Item 5</Table.Cell>
      <Table.Cell>Item 6</Table.Cell>
    </Table.Row>
    <Table.Row onSelect={() => console.log('Selected Row 3')}>
      <Table.Cell>Item 7</Table.Cell>
      <Table.Cell>Item 8</Table.Cell>
      <Table.Cell>Item 9</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
<Table onSelectAll={() => console.log('Selected all')}>
  <Table.Header>
    <Table.Column title="Column 1"></Table.Column>
    <Table.Column title="Column 2"></Table.Column>
    <Table.Column title="Column 3"></Table.Column>
  </Table.Header>

  <Table.Body>
    <Table.Row isSelected onSelect={() => console.log('Selected Row 1')}>
      <Table.Cell>Item 1</Table.Cell>
      <Table.Cell>Item 2</Table.Cell>
      <Table.Cell>Item 3</Table.Cell>
    </Table.Row>
    <Table.Row onSelect={() => console.log('Selected Row 2')}>
      <Table.Cell>Item 4</Table.Cell>
      <Table.Cell>Item 5</Table.Cell>
      <Table.Cell>Item 6</Table.Cell>
    </Table.Row>
    <Table.Row onSelect={() => console.log('Selected Row 3')}>
      <Table.Cell>Item 7</Table.Cell>
      <Table.Cell>Item 8</Table.Cell>
      <Table.Cell>Item 9</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
content_copy
Copy
live example

Expandable

You can toggle expand all by setting onExpandAll. Expanding is done internally, but you can pass initial prop isExpanded, as well as onExpand function.

<Table onExpandAll={() => console.log('Expanded all')}>
  <Table.Header>
    <Table.Column>Column 1</Table.Column>
    <Table.Column>Column 2</Table.Column>
    <Table.Column>Column 3</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.ExpandableRow onExpand={() => console.log('Expanded Row 1')}>
      <Table.Cell>Item 1</Table.Cell>
      <Table.Cell>Item 2</Table.Cell>
      <Table.Cell>Item 3</Table.Cell>
      <Table.ExpandableContent>
        <Table.Row>
          <Table.Cell>Item 1 - 1</Table.Cell>
          <Table.Cell>Item 2 - 2</Table.Cell>
          <Table.Cell>Item 3 - 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Item 1 - 4</Table.Cell>
          <Table.Cell>Item 2 - 5</Table.Cell>
          <Table.Cell>Item 3 - 6</Table.Cell>
        </Table.Row>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
    <Table.ExpandableRow isExpanded>
      <Table.Cell>Item 4</Table.Cell>
      <Table.Cell>Item 5</Table.Cell>
      <Table.Cell>Item 6</Table.Cell>
      <Table.ExpandableContent>
        <Table.Cell>Item 4 - 1</Table.Cell>
        <Table.Cell>Item 5 - 2</Table.Cell>
        <Table.Cell>Item 6 - 3</Table.Cell>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
  </Table.Body>
</Table>
<Table onExpandAll={() => console.log('Expanded all')}>
  <Table.Header>
    <Table.Column>Column 1</Table.Column>
    <Table.Column>Column 2</Table.Column>
    <Table.Column>Column 3</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.ExpandableRow onExpand={() => console.log('Expanded Row 1')}>
      <Table.Cell>Item 1</Table.Cell>
      <Table.Cell>Item 2</Table.Cell>
      <Table.Cell>Item 3</Table.Cell>
      <Table.ExpandableContent>
        <Table.Row>
          <Table.Cell>Item 1 - 1</Table.Cell>
          <Table.Cell>Item 2 - 2</Table.Cell>
          <Table.Cell>Item 3 - 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Item 1 - 4</Table.Cell>
          <Table.Cell>Item 2 - 5</Table.Cell>
          <Table.Cell>Item 3 - 6</Table.Cell>
        </Table.Row>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
    <Table.ExpandableRow isExpanded>
      <Table.Cell>Item 4</Table.Cell>
      <Table.Cell>Item 5</Table.Cell>
      <Table.Cell>Item 6</Table.Cell>
      <Table.ExpandableContent>
        <Table.Cell>Item 4 - 1</Table.Cell>
        <Table.Cell>Item 5 - 2</Table.Cell>
        <Table.Cell>Item 6 - 3</Table.Cell>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
  </Table.Body>
</Table>
content_copy
Copy
live example

Custom Components

Table.ExpandableContent is a wrapper component designed to handle nesting levels of declarative Rows and ExpandableRows. To ensure custom content nests properly, any props that are not explicitly handled must be spread (...rest) and passed to the top-level Row or ExpandableRow being wrapped. This is necessary because ExpandableContent passes styling-related props down the hierarchy.

function CustomExpandableContent() {
  /*
   * Take notice how rest of the properties are spread
   * down to the top-level `Row` or `ExpandableRow`
   */
  const CustomComponent = ({ customProp1, customProp2, ...rest }) => (
    <Table.ExpandableRow {...rest}>
      <Table.Cell>Custom Item 1</Table.Cell>
      <Table.Cell>Custom Item 2</Table.Cell>
      <Table.Cell>Custom Item 3</Table.Cell>
      <Table.ExpandableContent>
        <Table.Row>
          <Table.Cell>Custom Item 1 - 1</Table.Cell>
          <Table.Cell>Custom Item 2 - 2</Table.Cell>
          <Table.Cell>Custom Item 3 - 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Custom Item 1 - 4</Table.Cell>
          <Table.Cell>Custom Item 2 - 5</Table.Cell>
          <Table.Cell>Custom Item 3 - 6</Table.Cell>
        </Table.Row>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
  )
  return (
    <Table>
      <Table.Header>
        <Table.Column>Column 1</Table.Column>
        <Table.Column>Column 2</Table.Column>
        <Table.Column>Column 3</Table.Column>
      </Table.Header>
      <Table.Body>
        <Table.ExpandableRow>
          <Table.Cell>Item 1</Table.Cell>
          <Table.Cell>Item 2</Table.Cell>
          <Table.Cell>Item 3</Table.Cell>
          <Table.ExpandableContent>
            <Table.Row>
              <Table.Cell>Item 1 - 1</Table.Cell>
              <Table.Cell>Item 2 - 2</Table.Cell>
              <Table.Cell>Item 3 - 3</Table.Cell>
            </Table.Row>
            <CustomComponent />
          </Table.ExpandableContent>
        </Table.ExpandableRow>
        <Table.ExpandableRow>
          <Table.Cell>Item 4</Table.Cell>
          <Table.Cell>Item 5</Table.Cell>
          <Table.Cell>Item 6</Table.Cell>
          <Table.ExpandableContent>
            <Table.Cell>Item 4 - 1</Table.Cell>
            <Table.Cell>Item 5 - 2</Table.Cell>
            <Table.Cell>Item 6 - 3</Table.Cell>
          </Table.ExpandableContent>
        </Table.ExpandableRow>
      </Table.Body>
    </Table>
  )
}
function CustomExpandableContent() {
  /*
   * Take notice how rest of the properties are spread
   * down to the top-level `Row` or `ExpandableRow`
   */
  const CustomComponent = ({ customProp1, customProp2, ...rest }) => (
    <Table.ExpandableRow {...rest}>
      <Table.Cell>Custom Item 1</Table.Cell>
      <Table.Cell>Custom Item 2</Table.Cell>
      <Table.Cell>Custom Item 3</Table.Cell>
      <Table.ExpandableContent>
        <Table.Row>
          <Table.Cell>Custom Item 1 - 1</Table.Cell>
          <Table.Cell>Custom Item 2 - 2</Table.Cell>
          <Table.Cell>Custom Item 3 - 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Custom Item 1 - 4</Table.Cell>
          <Table.Cell>Custom Item 2 - 5</Table.Cell>
          <Table.Cell>Custom Item 3 - 6</Table.Cell>
        </Table.Row>
      </Table.ExpandableContent>
    </Table.ExpandableRow>
  )
  return (
    <Table>
      <Table.Header>
        <Table.Column>Column 1</Table.Column>
        <Table.Column>Column 2</Table.Column>
        <Table.Column>Column 3</Table.Column>
      </Table.Header>
      <Table.Body>
        <Table.ExpandableRow>
          <Table.Cell>Item 1</Table.Cell>
          <Table.Cell>Item 2</Table.Cell>
          <Table.Cell>Item 3</Table.Cell>
          <Table.ExpandableContent>
            <Table.Row>
              <Table.Cell>Item 1 - 1</Table.Cell>
              <Table.Cell>Item 2 - 2</Table.Cell>
              <Table.Cell>Item 3 - 3</Table.Cell>
            </Table.Row>
            <CustomComponent />
          </Table.ExpandableContent>
        </Table.ExpandableRow>
        <Table.ExpandableRow>
          <Table.Cell>Item 4</Table.Cell>
          <Table.Cell>Item 5</Table.Cell>
          <Table.Cell>Item 6</Table.Cell>
          <Table.ExpandableContent>
            <Table.Cell>Item 4 - 1</Table.Cell>
            <Table.Cell>Item 5 - 2</Table.Cell>
            <Table.Cell>Item 6 - 3</Table.Cell>
          </Table.ExpandableContent>
        </Table.ExpandableRow>
      </Table.Body>
    </Table>
  )
}
content_copy
Copy
live example