Table
Column Alignment
Align the text of both the column header and the cells under it
with the textAlign
column definition property.
Fruits | Vegetables | Grains | Dairy | Protein |
---|---|---|---|---|
Pomello | Bok Choi | Chia | Pule | Crickets |
Starfruit | Romanesco | Sorghum | Casu marzu | Barnacles |
Durian | Ramps | Teff | Vieux Lille | Inca nuts |
Persimmon | Fiddleheads | Quinoa | Milbenkase | Spirulina |
() => { 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 /> ); }