open-index/open-npm huggingface dataset:
npm package: @mac-barrett/sortable-table
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.1

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @mac-barrett/svelte-data-table
Description: A simple Svelte Component that wraps around the DataTables API
Author: Mac Barrett
Latest version: 0.1.1

# 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.')
}
```
npm package: @mac-barrett/svelte-mount-on-scroll
Description: A simple SvelteKit/Svelte component for snappy transitions and dynamic content!
Author: Mac Barrett
Latest version: 1.2.1

# Svelte MountOnScroll Component:
### Getting Started:
Installing:
```bash
npm i @mac-barrett/svelte-mount-on-scroll
```

Importing to your page or components:
```ts
import { MountOnScroll } from '@mac-barrett/svelte-mount-on-scroll';
```
### See Also:
[github.com](https://github.com/Mac-Barrett/svelte-mount-on-scroll/)

## About:
Mounts a component to the screen once the component is in view of the browser's viewport.
Useful for making snappy websites, where information or paragraphs are contained inside of the MountOnScroll component.
Uses the built in svelte/transitions fade & fly

### Properties:
Optional properties for customizing how your child components will come into view:

```ts
/** Used to define the config of the transition. If x or y key exists, then the "fly" transition is implicitly chosen. */
export let transitionProps: Partial<{ x: number, y: number, duration: number, delay: number }>= (default: undefined)

/** Will dismount the component when it is no longer on the screen */
export let dismounts: boolean
```

### Events:
- mountStart - Dispatched when the element(s) have started their animation and are mounting to the DOM.
- mountEnd - Dispatched when the element(s) have finished their animation and are mounted to the DOM.
- dismount - Dispatched when the element(s) have dismounted from the DOM.

## Basic use example:
You may choose to fill every field out or you may leave some blank:

```svelte
<MountOnScroll transitionProps={{ duration: 1000 }}>
    <h1>A MountOnScroll that simply fades in.</h1>
</MountOnScroll>

<MountOnScroll transitionProps={{ x: -200, y: 0, duration: 500, delay: 0 }}>
    <h1>A MountOnScroll that flys in from the left.</h1>
</MountOnScroll>

<MountOnScroll
    dismounts={true}
    transitionProps={{ x: 400, y: 0, duration: 4000, delay: 0 }}
    on:mountStart={() => console.log('Hello World!')}
    on:mountEnd={() => console.log('I have finished mounting!')}
    on:dismount={() => console.log('Goodbye, sweet prince...')}
>
    <h1 class="inside">A MountOnScroll with all of its components defined.</h1>
</MountOnScroll>
```