1.0.2 • Published 4 years ago
svelte-accessible-table v1.0.2
svelte-accessible-table
Accessible Svelte table component.
Installation
Yarn
yarn add -D svelte-accessible-tableNPM
npm i -D svelte-accessible-tablepnpm
pnpm i -D svelte-accessible-tableUsage
<script>
import {
TableContainer,
TableBody,
TableHead,
TableRow,
TableCell,
} from "svelte-accessible-table";
</script>
<TableContainer caption="Influential historical documents">
<TableHead>
<TableRow>
<TableCell>Document title</TableCell>
<TableCell>Description</TableCell>
<TableCell>Year</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Declaration of Independence</TableCell>
<TableCell>
Statement adopted by the Continental Congress declaring independence
from the British Empire
</TableCell>
<TableCell tabular>1776</TableCell>
</TableRow>
<TableRow>
<TableCell>Bill of Rights</TableCell>
<TableCell>
Document containing the first ten amendments to the United States
Constitution
</TableCell>
<TableCell tabular>1791</TableCell>
</TableRow>
<TableRow>
<TableCell>Declaration of Sentiments</TableCell>
<TableCell>
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens
</TableCell>
<TableCell tabular>1848</TableCell>
</TableRow>
</TableBody>
</TableContainer>API
TableContainer props
| Name | Type | Default value |
|---|---|---|
| caption | string or slot:name | undefined |
| zebra | boolean | false |
TableCell props
| Name | Type | Default value |
|---|---|---|
| tabular | boolean | false |
Forwarded events
The following events are forwarded to the TableHead, TableRow and TableCell components.
- on:click
- on:mouseenter
- on:mouseleave