Svelte Top Table

Bryley

A svelte component library for creating advanced stylish tables.

Want a Svelte site built?

Hire a Svelte developer

Download

Svelte-Top-Table

A svelte component library for creating advanced stylish tables.

Note that this library is still under development...

Installation

npm install svelte-top-table

Screenshots

TODO

Usage

`Table`

To create a basic table you will need to import and use the <Table> component from the main library.

Below are the props that you can pass into it:

Property	Type	Required	Default	Description
`data`	`Row[] \| () => Promise<Row[]>`	`true`	-	Describes how the table will retrieve its data. Either directly passed in, or an async function is passed in.
`tableRow`	`SvelteComponent`	`true`	-	The svelte component that will render the rows.
`fillSpace`	`boolean`	`false`	`false`	If the table should fill its available space (Apply's `width: 100%` CSS rule if true)
`disableClick`	`(row: Row) => boolean`	`false`	`_ => false` (All rows do have a click action on it)	A function that will return true if the given row cannot be clicked and false if it can be clicked
`rowDisabled`	`(row: Row) => boolean`	`false`	`_ => false` (All rows are enabled by default)	A function that will return true if the given row should be disabled and false if not
`rowHighlighted`	`(row: Row) => boolean`	`false`	`_ => false` (All rows are not highlighted)	A function that will return true if the given row should be highlighed
`errorComp`	`SvelteComponent \| undefined`	`false`	`undefined`	If the `data` prop is an async function and fails, then this component will be rendered instead of plain text. Note that the actual error will be passed into this prop as `error`
`errorCompProps`	`{ [key: string]: any }`	`false`	`{}`	Any additional properties to pass into the `errorComp`
`sortedColumn`	`SortData \| null`	`false`	`null`	A bindable field that stores what column the user want's to sort or null if no columns

Note that Row is a generic type passed into the Component that should be an object that contains a string key ({ [column: string]: any }).

Example

The below example creates a table that displays "people's" information:

<script>
    import { Table } from 'svelte-top-table';
    import PersonRow from './PersonRow.svelte';

    const examplePeople = [
        {
            name: "Bob",
            nickname: "Bobby",
            age: 46,
            favColor: "#45a",
            description: "Fantastic Guy",
        },
        {
            name: "Alice",
            nickname: "Al",
            age: 27,
            favColor: "#c50",
            description: "New member since 2005",
        },
        {
            name: "Steve",
            nickname: "Stevie",
            age: 18,
            favColor: "#f0b",
            description: "Can't stand rainy weather",
        },
        {
            name: "Brittany",
            nickname: "Briz",
            age: 33,
            favColor: "#19f",
            description: "Wizz with computers",
        },
    ];
</script>

<div>
    <Table
        data={examplePeople}
        tableRow={PeopleRow}
    />
    <!-- You can also put it in an async function incase your data is retrieved
    from someplace external -->
    <Table
        data={async () => examplePeople}
        tableRow={PeopleRow}
    />
</div>

<!-- PeopleRow.svelte -->
<script>
    import {TableColumn} from 'svelte-top-table';

    export let row;
</script>

<TableColumn title="Name">{row.name}</TableColumn>
<TableColumn title="Nickname">{row.nickname}</TableColumn>
<TableColumn title="Age">{row.age}</TableColumn>
<TableColumn title="Favourite Color">
    <div class="example-color" style="background: {row.favColor};" />
</TableColumn>
<TableColumn title="Description">{row.description}</TableColumn>

<style>
    .example-color {
        width: 50px;
        height: 10px;
        border-radius: 100em;
        border: solid #e6e6e6 3px;
    }
</style>

`TableColumn`

The TableColumn is used to define a column and is used within the component that is defined in the tableRow prop in either the Table or PaginationTable. The actual content of the cell is defined in the default slot and is usually dependent on the row.

Props

Property	Type	Required	Default	Description
`title`	`string`	`false`	`""`	The displayed title within the header
`id`	`string`	`false`	Whatever `title` is	The unique id of the column. Note this must be unique and if sorting is enabled then it will use this as the key it sorts by
`sticky`	`boolean`	`false`	`false`	If true, then the column will stay stuck to the edge when scrolling horisontally
`sortable`	`boolean`	`false`	`false`	If true then this column has the sorting functionality enabled. Note make sure that the `id` prop is set correctly so it knows what to sort by

An example can be seen above with PersonRow.svelte.

`TableGroup`

TableGroup is used to group columns together and allow users to collapse these groups of columns if they are taking up too much space. The columns that are a part of the group are given as the default slot of the component.

Props

Property	Type	Required	Default	Description
`name`	`string`	`true`	-	The unique name for the group to collapse

Example

<!-- This component is referenced in the `tableRow` prop for the Table -->
...
<TableColumn id="popularity" title="Popularity" sortable={true}>
    {row.popularity}
</TableColumn>

<TableGroup name="Additional Content">
    <TableColumn id="website" title="Website">
        {row.website}
    </TableColumn>

    <TableColumn id="creator" title="Creator" sortable={true}>
        {row.creator}
    </TableColumn>

    <TableColumn id="firstAppeared" title="First Appeared" sortable={true}>
        {row.firstAppeared}
    </TableColumn>
</TableGroup>

<TableColumn title="Logo">
    {row.logo}
</TableColumn>
...

`PaginationTable`

The PaginationTable is for large Tables with many rows.

Props

Property	Type	Required	Default	Description
`data`	`(search: PaginationInput) => Promise<Pagination<Row>>`	`true`	-	Describes how the table will retrieve its data. Either directly passed in, or an async function is passed in.

`FilterSelection`

TODO

Colors

TODO

If you need more examples, have a look at the routes for some examples on how to use the tables these examples are also in Typescript.

Top categories

Want a Svelte site built?

Hire a Svelte developer