NOTE: Introduced feature in
v0.2.7.
Table is typically used to render tabular data in a structured row -> columns format, for end-users to easily read the contents.
<script>
import {
Code,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Table.Container>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">desktop</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">widescreen</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>Table Imports
<script>
import {Table} from "@kahi-ui/framework";
const {
Container,
Column,
Footer,
Header,
Heading,
Row,
Section,
} = Table;
</script>Spans
NOTE: Introduced feature in
v0.4.4.
WARNING: This feature was renamed from
colspan/rowspantospan_x/span_yinv0.6.0respectively.
You can use the span_x / span_y properties on <Table.Column> / <Table.Heading> to adjust the size of table items they take up.
<script>
import {Table} from "@kahi-ui/framework";
</script>
<Table.Container>
<Table.Header>
<Table.Row>
<Table.Heading span_x={2}>
span_x 2 x span_y 1
</Table.Heading>
<Table.Heading>
span_x 1 x span_y 1
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
span_x 1 x span_y 1
</Table.Column>
<Table.Column span_y={2}>
span_x 1 x span_y 2
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
span_x 1 x span_y 1
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading span_x={3}>
span_x 3 x span_y 1
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>Borders
You can make a Table have borders via the variation property.
<script>
import {
Code,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Table.Container variation="borders">
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">desktop</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">widescreen</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>Stripes
You can make a Table have stripes via the variation property.
<script>
import {
Code,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Table.Container variation="stripes">
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">desktop</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">widescreen</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>Borders + Stripes
You can make a Table have both borders AND stripes via the variation property.
<script>
import {
Code,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Table.Container variation={["borders", "stripes"]}>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">desktop</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">widescreen</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>Sizing
NOTE: Introduced feature in
v0.3.5.
You can change the sizes / spacings of the child elements via the sizing property.
<script>
import {
Code,
Stack,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container spacing="medium">
<div>
<Text is="strong">DEFAULT</Text>
<Table.Container variation="borders">
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">NANO</Text>
<Table.Container
variation="borders"
sizing="nano"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">TINY</Text>
<Table.Container
variation="borders"
sizing="tiny"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">SMALL</Text>
<Table.Container
variation="borders"
sizing="small"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">MEDIUM</Text>
<Table.Container
variation="borders"
sizing="medium"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">LARGE</Text>
<Table.Container
variation="borders"
sizing="large"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">HUGE</Text>
<Table.Container
variation="borders"
sizing="huge"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
<div>
<Text is="strong">MASSIVE</Text>
<Table.Container
variation="borders"
sizing="massive"
>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
desktop
</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">
widescreen
</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>
Minimum
</Table.Heading>
<Table.Heading>
Maximum
</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</div>
</Stack.Container>Scrollable Tables
You can make a Table scrollable by wrapping it with a Scrollable.
<script>
import {
Code,
Scrollable,
Table,
Text,
} from "@kahi-ui/framework";
</script>
<Scrollable width="medium">
<Table.Container>
<Table.Header>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Section>
<Table.Row>
<Table.Column>
<Text is="strong">mobile</Text>
</Table.Column>
<Table.Column>
<Code>0px</Code>
</Table.Column>
<Table.Column>
<Code>640px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">tablet</Text>
</Table.Column>
<Table.Column>
<Code>641px</Code>
</Table.Column>
<Table.Column>
<Code>768px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">desktop</Text>
</Table.Column>
<Table.Column>
<Code>769px</Code>
</Table.Column>
<Table.Column>
<Code>1024px</Code>
</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
<Text is="strong">widescreen</Text>
</Table.Column>
<Table.Column>
<Code>1025px</Code>
</Table.Column>
<Table.Column>
<Code>∞</Code>
</Table.Column>
</Table.Row>
</Table.Section>
<Table.Footer>
<Table.Row>
<Table.Heading />
<Table.Heading>Minimum</Table.Heading>
<Table.Heading>Maximum</Table.Heading>
</Table.Row>
</Table.Footer>
</Table.Container>
</Scrollable>