Table

Components

Table

Code

Table is a component used for displaying formatted tabular data.

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"
/>

<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

Name	Type	Default	Description
`head`	`TypeTableHeaderCell`	`[]`	Array of TableHeaderCells to render
`rows`	`{\| /** Table Row Id / id: string, /* Array for TableCells to render */ cells: TypeTableCell[], \|}`	`[]`	Array of TableRows to render
`onSort`	`(id: string) => void`		Callback for Sorting Table Columns (optional)
`sortId`	`string`		Controls which column is being sorted (optional)
`sortDirection`	`TypeEnumSortDirections`		Controls the current sort direction (optional)
`rowRender`	`(row: TypeTableRow) => React.Node`		Custom row render for flexibilty
`children`	`React.Node`		Including children will overwrite all head, rows, rowRender, and sorting props Should be used for manually rendering tables and ignoring data props

Subcomponents

Table Cell

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

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

Name	Type	Description
`id`	`string`	Table Cell Id
`content`	`React.Node`	Content is deprecated. Please use children instead. Content to be render
`colSpan`	`number`	Controls the colSpan attribute (optional)
`width`	`number`	Controls the width attribute (optional)
`align`	`"left"` `"right"` `"center"` `"justify"`	Controls the CSS text-align property (optional)
`children`	`React.Node`	Children to be rendered

Table Header Cell

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

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

Name	Type	Description
`isSortable`	`boolean`	Legacy Deteremines if a table column is sortable (optional)
`shouldTruncate`	`boolean`	Truncates text into a singular line with ellipsis (optional)
`onSort`	`(id: string) => void`	Legacy: Callback for Sorting Table Columns (optional)
`sortId`	`string`	Legacy: Controls which column is being sorted (optional)
`sortDirection`	`ASC` `DESC`	Legacy: Controls the current sort direction (optional)
`onClick`	`(e: SyntheticEvent<HTMLButtonElement>) => void`	Callback for Click Events. If Included will override onSort prop

Table Row Accordion

Name	Type	Description
`detail`	`React.Node`	Content to be rendered in accordion drawer
`isExpanded`	`boolean`	Controls the display state of the accordion drawer
`onToggle`	`(id: string) => void`	Callback for toggling the accordion drawer state

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
    }
  ]}
/>

<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
    }
  ]}
/>

<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' />
        }
      />
    )
  }}
/>

<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' />
        }
      />
    )
  }}
/>