Table

Column Alignment

Align the text of both the column header and the cells under it with the textAlign column definition property.

Foods of the World

FruitsVegetablesGrainsDairyProtein
PomelloBok ChoiChiaPuleCrickets
StarfruitRomanescoSorghumCasu marzuBarnacles
DurianRampsTeffVieux LilleInca nuts
PersimmonFiddleheadsQuinoaMilbenkaseSpirulina
() => {
  const columns = [
    { content: 'Fruits', key: 'Fruits' },
    { content: 'Vegetables', key: 'Vegetables', textAlign: 'end' },
    { content: 'Grains', key: 'Grains', textAlign: 'center' },
    { content: 'Dairy', key: 'Dairy',  textAlign: 'justify' },
    { content: 'Protein', key: 'Protein' }
  ];

  return (
    <Table
      columns={columns}
      data={data}
      title="Foods of the World"
      hideTitle />
  );
}