svelte-accessible-table

Accessible Svelte table component.

Installation

Yarn

yarn add -D svelte-accessible-table

NPM

npm i -D svelte-accessible-table

pnpm

pnpm i -D svelte-accessible-table

Usage

<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

Changelog

Changelog

License

MIT