This component will be removed soon.

Potentially does too much work. Consider if should be multiple components: Table, TableHeader, SortableTable, etc.

Table (Deprecated)

unstyled

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
/>

table-striped

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  className="table-striped"
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  className="table-striped"
/>

default heading

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  headingClassName={['thead-default']}
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  headingClassName={['thead-default']}
/>

responsive

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  className="table-responsive"
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  className="table-responsive"
/>

sortable

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const catData = [
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ];

  const catColumns = [
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ];

  const sort = function sort(firstElement, secondElement, key, direction) {
    const directionIsAsc = direction === 'asc';

    if (firstElement[key] > secondElement[key]) {
      return directionIsAsc ? 1 : -1;
    } else if (firstElement[key] < secondElement[key]) {
      return directionIsAsc ? -1 : 1;
    }
    return 0;
  };

  const catDataSortable = catData.slice();

  return (
    <Table
      data={catDataSortable.sort((firstElement, secondElement) =>
        sort(firstElement, secondElement, catColumns[0].key, 'desc'),
      )}
      columns={catColumns.map(column => ({
        ...column,
        onSort(direction) {
          catDataSortable.sort((firstElement, secondElement) =>
            sort(firstElement, secondElement, column.key, direction),
          );
        },
      }))}
      caption="Famous Internet Cats"
      tableSortable
      defaultSortedColumn={catColumns[0].key}
      defaultSortDirection="desc"
    />
  );
};

() => {
  const catData = [
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ];

  const catColumns = [
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ];

  const sort = function sort(firstElement, secondElement, key, direction) {
    const directionIsAsc = direction === 'asc';

    if (firstElement[key] > secondElement[key]) {
      return directionIsAsc ? 1 : -1;
    } else if (firstElement[key] < secondElement[key]) {
      return directionIsAsc ? -1 : 1;
    }
    return 0;
  };

  const catDataSortable = catData.slice();

  return (
    <Table
      data={catDataSortable.sort((firstElement, secondElement) =>
        sort(firstElement, secondElement, catColumns[0].key, 'desc'),
      )}
      columns={catColumns.map(column => ({
        ...column,
        onSort(direction) {
          catDataSortable.sort((firstElement, secondElement) =>
            sort(firstElement, secondElement, column.key, direction),
          );
        },
      }))}
      caption="Famous Internet Cats"
      tableSortable
      defaultSortedColumn={catColumns[0].key}
      defaultSortDirection="desc"
    />
  );
};

fixed

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  hasFixedColumnWidths
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  hasFixedColumnWidths
/>

row header

Show editable code example

Any Paragon component or export may be added to the code example.

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  rowHeaderColumnKey="name"
/>

<Table
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
    },
  ]}
  columns={[
    {
      label: 'Name',
      key: 'name',
      columnSortable: true,
      onSort: () => {},
      width: 'col-3',
    },
    {
      label: 'Famous For',
      key: 'famous_for',
      columnSortable: false,
      onSort: () => {},
      width: 'col-6',
    },
    {
      label: 'Coat Color',
      key: 'color',
      columnSortable: false,
      hideHeader: true,
      onSort: () => {},
      width: 'col-3',
    },
  ]}
  caption="Famous Internet Cats"
  rowHeaderColumnKey="name"
/>

Theme Variables (SCSS)#

$table-cell-padding:           .75rem !default;
$table-cell-padding-sm:        .3rem !default;
$table-color:                  $body-color !default;
$table-bg:                     null !default;
$table-accent-bg:              rgba($black, .05) !default;
$table-hover-color:            $table-color !default;
$table-hover-bg:               rgba($black, .075) !default;
$table-active-bg:              $table-hover-bg !default;
$table-border-width:           $border-width !default;
$table-border-color:           $border-color !default;
$table-head-bg:                theme-color("gray", "background") !default;
$table-head-color:             theme-color("gray", "text") !default;
$table-dark-color:             $white !default;
$table-dark-bg:                theme-color("gray", "hover") !default;
$table-dark-accent-bg:         rgba($white, .05) !default;
$table-dark-hover-color:       $table-dark-color !default;
$table-dark-hover-bg:          rgba($white, .075) !default;
$table-dark-border-color:      lighten($table-dark-bg, 7.5%) !default;
$table-dark-color:             $white !default;
$table-striped-order:          odd !default;
$table-caption-color:          $text-muted !default;
$table-bg-level:               -9 !default;
$table-border-level:           -6 !default;

Paragon Design System

Theme

PlaygroundBeta

Table (Deprecated)

unstyled

table-striped

default heading

responsive

sortable

fixed

row header

Theme Variables (SCSS)#

All components (A-Z)

Theme

PlaygroundBeta

Table (Deprecated)

unstyled#

table-striped#

default heading#

responsive#

sortable#

fixed#

row header#

Theme Variables (SCSS)#

All components (A-Z)

unstyled

table-striped

default heading

responsive

sortable

fixed

row header