Table (Legacy)

Components

Table (Legacy)

Code

The legacy Table component. Use DataTable or Table for new work.

Though basic styles are included with the component, utility components like Box and Text are the best option for handling row and cell-level formatting customization needs.

import { Table } from '@sproutsocial/racine'

<Table
  head={[
    {content: 'Food Item', id: '1'},
    {content: 'Calories', id: '2', isSortable: true},
    {content: 'Total Fat: (69% DV*)', id: '3'},
    {content: 'Total Carbs: (21% DV*)', id: '4'},
    {content: 'Protein', id: '5'}
  ]}
  rows={[
    {
      cells: [
        {content: '🍔 Bacon Smokehouse Burger', id: '1'},
        {content: '840', id: '2'},
        {content: '45g', id: '3'},
        {content: '62g', id: '4'},
        {content: '46g', id: '5'}
      ],
      id: 1
    },
    {
      cells: [
        {content: '🍔 Big Mac', id: '1'},
        {content: '540', id: '2'},
        {content: '28g', id: '3'},
        {content: '46g', id: '4'},
        {content: '25g', id: '5'}
      ],
      id: 2
    }
  ]}
  onSort={e => alert('Sort!')}
  sortDirection="asc"
  sortId="2"
/>

Properties

Subcomponents

Table Cell

<TableCell
  content="🍔 Bacon Smokehouse Burger"
  id="bacon_smokehouse"
/>

Table Header Cell

<TableHeaderCell
  content="Food Item"
  id="1"
/>

Table Row Accordion

Recipes

Column span

<Table
  head={[{
    colSpan: 2,
    content: 'Header',
    id: '1'
  }]}
  rows={[
    {
      cells: [
        {content: 'Column 1', id: '1'},
        {content: 'Column 2', id: '2'}
      ],
      id: 1
    },
    {
      cells: [
        {
          colSpan: 2,
          content: 'This is a footer for the table.',
          id: '1'
        }
      ],
      id: 2
    }
  ]}
/>

Column width

<Table
  head={[
    {
      content: 'Food Item',
      id: '1',
      width: 200
    },
    {
      align: 'center',
      content: 'Calories',
      id: '2',
      isSortable: true,
      width: 100
    },
    {
      content: 'Description',
      id: '3'
    },
    {
      align: 'right',
      content: 'Protein',
      id: '4',
      width: 100
    }
  ]}
  rows={[
    {
      cells: [
        {
          content: '🍔 Bacon Smokehouse Burger',
          id: '1',
          width: 200
        },
        {
          align: 'center',
          content: '840',
          id: '2',
          width: 100
        },
        {
          content: 'A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.',
          id: '3'
        },
        {
          align: 'right',
          content: '46g',
          id: '4'
        }
      ],
      id: 1
    },
    {
      cells: [
        {
          content: '🍔 Big Mac',
          id: '1',
          width: 200
        },
        {
          align: 'center',
          content: '540',
          id: '2',
          width: 100
        },
        {
          content: 'Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.',
          id: '3'
        },
        {
          align: 'right',
          content: '25g',
          id: '4'
        }
      ],
      id: 2
    }
  ]}
/>

Custom row rendering

<Table
  head={[
    {
      id: "1",
      content: "Food Item"
    },
    {
      id: "2",
      content: "Calories",
      isSortable: true
    },
    {
      id: "3",
      content: "Total Fat: (69% DV*)"
    },
    {
      id: "4",
      content: "Total Carbs: (21% DV*)"
    },
    {
      id: "5",
      content: "Protein"
    }
  ]}
  rows={[
    {
      id: "baconsmokehouse",
      cells: [
        {id: "1", content: "🍔 Bacon Smokehouse Burger"},
        {id: "2", content: "840"},
        {id: "3", content: "45g"},
        {id: "4", content: "62g"},
        {id: "5", content: "46g"}
      ]
    },
    {
      id: "Big-Mac",
      cells: [
        {id: "1", content: "🍔 Big Mac"},
        {id: "2", content: "540"},
        {id: "3", content: "28g"},
        {id: "4", content: "46g"},
        {id: "5", content: "25g"}
      ]
    }
  ]}
  rowRender={(row) => {
    return (
      <TableRowAccordion
        key={row.id}
        id={row.id}
        cells={row.cells}
        isExpanded={row.id === 'baconsmokehouse'}
        onToggle={(id) => alert(`Toggled ID #${id}`)}
        detail={row.id === 'baconsmokehouse' ? 
          <img width='100%' src='https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-baconsmokehouse.jpg' alt='doge' /> : 
          <img width='100%' src='https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-Big-Mac.jpg' alt='doge' />
        }
      />
    )
  }}
/>