Data matrix
Props
| Name | Type | Default | Description |
|---|
columns | Column[] | | Array of column config |
rows | Array<any>[] | | Data to be rendered by the table |
breakpoint | string \\\| number | 0 | Point to break to alternate table |
Usage
<DataMatrix
breakpoint={0}
columns={[
{
heading: 'Category',
isHeading: true,
}, {
heading: 'Day return',
tooltip: (
<Text>
Valid for passenger returning by 4.30 am next day. <Anchor href='#'>More info</Anchor>.
</Text>
)
}, {
heading: 'Return',
tooltip: (
<Text>
Valid for passenger returning within 364 nights. <Anchor href='#'>More info</Anchor>.
</Text>
)
}, {
heading: 'Single',
}, {
heading: 'Evening flyer',
tooltip: (
<Text>
Valid for a return journey only. Outward journey must be taken after 4.00 pm and before 23.59 pm, return travel by 4.30 am next day. <Anchor href='#'>More info</Anchor>.
</Text>
)
}
]}
rows={[
[
'Adult', '£17.60', '£25.20', '£13.60', '£14.40'
], [
'Child (5-15)', '£8.80', '£12.60', '£6.80', '£7.20'
], [
'Education & Training', '£13.10', '£18.50', '£10.10', '£10.70'
], [
{
value: 'Student (16-18)',
tooltip: (
<Text>
A valid NUS/Student Rider/ISIC (International Student identity Card)/NUS Extra card or College/University photo ID cards with an expiry date.
<Anchor href='#'>More info</Anchor>.
</Text>
)
}, '£14.90', '£21.10', '£11.30', '£12.20'
], [
'Family', '£44.50', '£63.00', 'N/A', '£34.50'
], [
'Infants', 'Free', 'Free', 'Free', 'Free'
],
]}
/>