Table

Title

Display a title for your Table with the title prop. You can adjust the appearance (titleAppearance) and the rendered HTML element (titleAs). Use the hideTitle prop to hide the title visually, while maintaining accessibility.

Foods of the World

FruitsVegetablesGrainsDairyProtein
PomelloBok ChoiChiaPuleCrickets
StarfruitRomanescoSorghumCasu marzuBarnacles
DurianRampsTeffVieux LilleInca nuts
PersimmonFiddleheadsQuinoaMilbenkaseSpirulina

Foods of the World

FruitsVegetablesGrainsDairyProtein
PomelloBok ChoiChiaPuleCrickets
StarfruitRomanescoSorghumCasu marzuBarnacles
DurianRampsTeffVieux LilleInca nuts
PersimmonFiddleheadsQuinoaMilbenkaseSpirulina
<Grid alignItems="end" breakpoints={['57em']}>
  <GridItem span={[12, 6]} marginBottom={['lg', 0]}>
    <Table
      title="Foods of the World"
      data={data}
      rowKey="Fruits"/>
  </GridItem>
  <GridItem span={[12, 6]}>
    <Table
      title="Foods of the World"
      titleAppearance="h2"
      titleAs="h3"
      data={data}
      rowKey="Fruits"/>
  </GridItem>
</Grid>