# @mac-barrett/svelte-data-table

> A simple Svelte Component that wraps around the DataTables API

Latest version **0.1.1** (published 2023-03-01) · 0 weekly downloads

## Install

```sh
npm install @mac-barrett/svelte-data-table
pnpm add @mac-barrett/svelte-data-table
yarn add @mac-barrett/svelte-data-table
bun add @mac-barrett/svelte-data-table
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-03-01 |
| First published | 2023-01-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 5 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mac Barrett |
| Maintainers | mac-barrett |
| Keywords | Svelte, SvelteKit, DataTables, datatables, tables |

## Links

- npm: https://www.npmjs.com/package/@mac-barrett/svelte-data-table
- Homepage: https://github.com/Mac-Barrett/svelte-data-tables.git
- Issues: https://github.com/Mac-Barrett/svelte-data-tables/issues
- npm.io page: https://npm.io/package/@mac-barrett/svelte-data-table

## Dependencies (5)

- [jquery](https://npm.io/package/jquery.md) ^3.4.1
- [sirv-cli](https://npm.io/package/sirv-cli.md) ^0.4.4
- [datatables.net](https://npm.io/package/datatables.net.md) ^1.10.20
- [@sveltejs/package](https://npm.io/package/@sveltejs/package.md) ^1.0.2
- [datatables.net-dt](https://npm.io/package/datatables.net-dt.md) ^1.10.20

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-03-01
- 0.1.0 — 2023-01-19
- 0.0.3 — 2023-01-13
- 0.0.2 — 2023-01-13
- 0.0.1 — 2023-01-13

## README

# Svelte DataTable Component

## About:
Svelte component that wraps around the DataTable api. See [datatables.net](https://datatables.net)

### Getting Started:
Install:
```sh
npm i @mac-barrett/svelte-data-table
```
Import: 
```ts
import { SvelteDataTable } from '@mac-barrett/svelte-data-table'
```
Svelte wrapper component for the DataTables.net npm package.
See the [DataTables.net](https://datatables.net) documentation for more information about the API

### Usage:
```tsx
<SvelteDataTable bind:this={myDataTable}
    config={{
        paging: false,
        autoWidth: false
    }}
>
    <thead slot="thead">
        <tr>
            {#each headers as header}
                <td>{header}</td>
            {/each}
        </tr>
    </thead>

    <tbody slot="tbody">
        {#each rows as row}
            <tr>
                {#each row as col}
                    <td>{col}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</SvelteDataTable>
```
### Properties:
Data tables config object. Used to set datatables properties.
See [DataTables.net](https://datatables.net) for more information.
```ts
export let config: Config | undefined
```
Filter callback function. The DataTables API will automatically use
this to determine which rows show up in your table.
```ts
export var filterCallback: (settings: any, data: string[], row: number, rawInput: any[], searchCounter: number) => boolean
```
### Methods:
Can be called to return the instance of the DataTablesAPI for the table.
See the [DataTables.net](https://datatables.net) documentation for more
information about the API

```ts
export const getAPI = () => { return dataTableAPI; }
```

Call this to reinitialize the datatables API so that it will use new data
that has been inserted into the table.
```ts
export const reinitializeAPI = async (newDataCallback: (() => Promise<any>) | undefined = undefined) => {
    await tick();
    if (tableElement !== undefined) {
        dataTableAPI?.destroy();

        if (newDataCallback !== undefined) {
            await newDataCallback();
        }
        await tick();

        dataTableAPI = new DataTables('#table', config);
    }
    else console.error('DataTable Element is undefined.')
}
```

---
_Source: https://npm.io/package/@mac-barrett/svelte-data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._