svelte-datatables-net

svelte-datatables-net

svelte-datatables-net is a svelte/sveltekit component that turns data into an interactive HTML table. Inspired by datatables.net.

FEATURES

• POSSIBILITY OF CHOOSING THE SEARCHABLE COLUMNS.
• POSSIBILITY OF CHOOSING THE SORTABLE COLUMNS.
• PAGINATION.
• POSSIBILITY OF CHOOSING AND CHANGING THE NUMBER OF ROWS PER PAGE.
• NON-OPINIONATED STYLING.
• NON-OPINIONATED POSITIONING.
• TYPESCRIPT SUPPORT.

DEMOS

• REPL: BOOTSTRAP 5 EXAMPLE
• REPL: SKELETON EXAMPLE
• REPL: FETCH EXAMPLE

INSTALLATION

npm install svelte-datatables-net

COMPONENT STRUCTURE

• functionCreateDatatable: A function to create an object with all the states of the component.
• Engine: This is a hidden component (it won't display anything on the screen). However, it is critical for the other components to work together. You must always use it!
• Search: A svelte component with a search input.
• RowsPerPage: A svelte component with a select input to choose the number of rows per page.
• Pagination: A svelte component to change the active page.
• Sort: A svelte component that enable sorting for a specific column.
• typeDatatable: If you are using typescript, it is a type definition for the component states.

PARAMETERS AND PROPS

• PARAMETERS OF functionCreateDatatable:

PARAMETER	DESCRIPTION	TYPE	REQUIRED	DEFAULT
parData	AN ARRAY WITH THE DATA.	Generic[]	YES	-
parSearchableColumns	AN ARRAY WITH THE SEARCHABLE COLUMNS (KEYS OF parData).	(keyof Generic)[]	NO	undefined
parSearchString	THE SEARCH STRING CAN BE SET PREVIOUSLY WITH THIS PROP.	string	NO	'' (EMPTY STRING)
parRowsPerPage	THE INITIAL NUMBER OF ROWS PER PAGE.	string (NUMERIC STRING OR 'all')	NO	'all'
parSortBy	THE INITIAL SORT COLUMN (A KEY OF parData).	keyof Generic	NO	undefined (NO INITIAL SORTING)
parSortOrder	THE INITIAL SORT ORDER	'ascending' OR 'descending'	NO	'ascending'
parSortFunction	A COMPARE FUNCTION THAT SPECIFIES THE INITIAL SORT ORDER. (MORE DETAILS HERE)	(a: Generic, b: Generic) => number	NO	A STANDARD FUNCTION TO SORT ALPHABETICALLY.

• PROPS OF Engine:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-

• PROPS OF Search:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-
propPlaceholder	SEARCH INPUT PLACEHOLDER.	string	NO	'Type here...'

• PROPS OF RowsPerPage:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-

• PROPS OF Pagination:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-
OTHER PROPS...	SEE THIS.	-	NO	-

• PROPS OF Sort:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-
propIconSize	SIZE OF THE SORT ICON	number	NO	10

EXAMPLES

• SKELETON EXAMPLE:

<script>
    import { Engine, functionCreateDatatable, Pagination, RowsPerPage, Search, Sort } from 'svelte-datatables-net';

    const arrayUsers = [
        { id: 9, name: 'Denzel', age: 24, city: 'Newcastle' },
        { id: 12, name: 'Olga', age: 35, city: 'Las Cruces' },
        { id: 13, name: 'Barry', age: 27, city: 'Newport' },
        { id: 10, name: 'Anthony', age: 47, city: 'Los Banos' },
        { id: 2, name: 'Mary', age: 45, city: 'Los Angeles' },
        { id: 1, name: 'John', age: 21, city: 'New York' },
        { id: 3, name: 'Mark', age: 23, city: 'Boston' },
        { id: 5, name: 'Brian', age: 22, city: 'New Orleans' },
        { id: 14, name: 'Larry', age: 41, city: 'Los Altos' },
        { id: 4, name: 'Cris', age: 32, city: 'Las Vegas' },
        { id: 6, name: 'Stuart', age: 46, city: 'Los Gatos' },
        { id: 7, name: 'Owen', age: 24, city: 'Boston' },
        { id: 8, name: 'Paul', age: 33, city: 'Las Vegas' },
        { id: 11, name: 'Fred', age: 25, city: 'Boston' },
        { id: 15, name: 'Richard', age: 29, city: 'Boston' },
        { id: 16, name: 'Bruna', age: 31, city: 'Las Vegas' }
    ];

    let objectDatatable = functionCreateDatatable({
        parData: arrayUsers,
        parSearchableColumns: ['name', 'city'],
        parRowsPerPage: '5',
        parSearchString: '',
        parSortBy: 'city',
        parSortOrder: 'ascending'
    });
</script>

<Engine bind:propDatatable={objectDatatable} />

<p>
    <span>Search:</span>
    <Search bind:propDatatable={objectDatatable} propPlaceholder="Type here..." />
</p>
<p>
    <RowsPerPage bind:propDatatable={objectDatatable}>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="all">ALL</option>
    </RowsPerPage>
    <span>RESULTS PER PAGE</span>
</p>
<p>
    <Pagination bind:propDatatable={objectDatatable} propSize="small" />
</p>

<table>
    <thead>
        <tr>
            <th><Sort bind:propDatatable={objectDatatable} propColumn={'id'}>ID (click here)</Sort></th>
            <th><Sort bind:propDatatable={objectDatatable} propColumn={'name'}>NAME (click here)</Sort>
            </th>
            <th>AGE</th>
            <th>CITY</th>
        </tr>
    </thead>
    <tbody>
        {#each objectDatatable.arrayData as row}
            <tr>
                <td>{row.id}</td>
                <td>{row.name}</td>
                <td>{row.age}</td>
                <td>{row.city}</td>
            </tr>
        {/each}
    </tbody>
</table>

• FETCH EXAMPLE (WITH TYPESCRIPT)

<script lang="ts">
    import type { typeDatatable } from 'svelte-datatables-net';
    import { Engine, functionCreateDatatable, Pagination, RowsPerPage, Search, Sort } from 'svelte-datatables-net';

    type typeData = {
        brand: string;
        category: string;
        description: string;
        discountPercentage: number;
        id: number;
        images: string[];
        price: number;
        rationg: number;
        stock: number;
        thumbnail: string;
        title: string;
    };

    let objectDatatable: typeDatatable<typeData>;

    const functionReadData = async function () {
        const responseData = await fetch('https://dummyjson.com/products');
        const jsonData = await responseData.json();
        const arrayData = jsonData.products as typeData[];
        objectDatatable = functionCreateDatatable({
            parData: arrayData,
            parSearchableColumns: ['id', 'brand', 'category', 'description'],
            parRowsPerPage: '10',
            parSearchString: '',
            parSortBy: 'id',
            parSortOrder: 'ascending'
        });
    };
</script>

{#await functionReadData()}
    READING DATA...
{:then}
    <Engine bind:propDatatable={objectDatatable} />

    <p>
        <span>Search:</span>
        <Search bind:propDatatable={objectDatatable} propPlaceholder="Type here..." />
    </p>
    <p>
        <RowsPerPage bind:propDatatable={objectDatatable}>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="all">ALL</option>
        </RowsPerPage>
        <span>RESULTS PER PAGE</span>
    </p>
    <p>
        <Pagination bind:propDatatable={objectDatatable} propSize="small" />
    </p>

    <table>
        <thead>
            <tr>
                <th>
                    <Sort bind:propDatatable={objectDatatable} propColumn={'id'}>ID (click here)</Sort
                    >
                </th>
                <th>
                    <Sort bind:propDatatable={objectDatatable} propColumn={'brand'}
                        >BRAND (click here)</Sort
                    >
                </th>
                <th>CATEGORY</th>
                <th>DESCRIPTION</th>
                <th>STOCK</th>
            </tr>
        </thead>
        <tbody>
            {#each objectDatatable.arrayData as row}
                <tr>
                    <td>{row.id}</td>
                    <td>{row.brand}</td>
                    <td>{row.category}</td>
                    <td>{row.description}</td>
                    <td>{row.stock}</td>
                </tr>
            {/each}
        </tbody>
    </table>
{/await}

• BOOTSTRAP 5 EXAMPLE:

<script lang="ts">
    import { Engine, functionCreateDatatable, Pagination, RowsPerPage, Search, Sort } from 'svelte-datatables-net';

    const arrayUsers = [
        { id: 9, name: 'Denzel', age: 24, city: 'Newcastle' },
        { id: 12, name: 'Olga', age: 35, city: 'Las Cruces' },
        { id: 13, name: 'Barry', age: 27, city: 'Newport' },
        { id: 10, name: 'Anthony', age: 47, city: 'Los Banos' },
        { id: 2, name: 'Mary', age: 45, city: 'Los Angeles' },
        { id: 1, name: 'John', age: 21, city: 'New York' },
        { id: 3, name: 'Mark', age: 23, city: 'Boston' },
        { id: 5, name: 'Brian', age: 22, city: 'New Orleans' },
        { id: 14, name: 'Larry', age: 41, city: 'Los Altos' },
        { id: 4, name: 'Cris', age: 32, city: 'Las Vegas' },
        { id: 6, name: 'Stuart', age: 46, city: 'Los Gatos' },
        { id: 7, name: 'Owen', age: 24, city: 'Boston' },
        { id: 8, name: 'Paul', age: 33, city: 'Las Vegas' },
        { id: 11, name: 'Fred', age: 25, city: 'Boston' },
        { id: 15, name: 'Richard', age: 29, city: 'Boston' },
        { id: 16, name: 'Bruna', age: 31, city: 'Las Vegas' }
    ];

    let objectDatatable = functionCreateDatatable({
        parData: arrayUsers,
        parSearchableColumns: ['name', 'city'],
        parRowsPerPage: '5',
        parSearchString: '',
        parSortBy: 'city',
        parSortOrder: 'ascending'
    });
</script>

<svelte:head>
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"
    />
</svelte:head>

<Engine bind:propDatatable={objectDatatable} />

<div class="container-sm">
    <div class="mx-3">
        <!-- SEARCH & RESULTS PER PAGE -->
        <div class="row align-items-center mb-2">
            <div class="col-12 col-md-6 text-md-start text-center mb-1 mb-md-0">
                <div class="d-md-flex align-items-md-center">
                    <span class="me-1">Search:</span>
                    <Search 
                        bind:propDatatable={objectDatatable} 
                        propPlaceholder="Type here..." 
                        class="form-control form-control-sm"
                    />
                </div>
            </div>
            <div class="col-12 col-md-6 text-md-end text-center">
                <RowsPerPage
                    bind:propDatatable={objectDatatable}
                    class="d-inline form-select form-select-sm w-auto"
                >
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="all">ALL</option>
                </RowsPerPage>
                <span>RESULTS PER PAGE</span>
            </div>
        </div>
        <!---->
        {#if objectDatatable.arraySearched.length === 0}
            <div class="text-center mt-5"><strong>NO RECORDS FOUND.</strong></div>
        {:else}
            <!-- TABLE -->
            <table class="table table-striped table-sm mt-2">
                <thead>
                    <tr>
                        <th>
                            <Sort bind:propDatatable={objectDatatable} propColumn={'id'}>ID</Sort>
                        </th>
                        <th>
                            <Sort bind:propDatatable={objectDatatable} propColumn={'name'}>NAME</Sort>
                        </th>
                        <th>AGE</th>
                        <th>CITY</th>
                    </tr>
                </thead>
                <tbody>
                    {#each objectDatatable.arrayData as row}
                        <tr>
                            <td>{row.id}</td>
                            <td>{row.name}</td>
                            <td>{row.age}</td>
                            <td>{row.city}</td>
                        </tr>
                    {/each}
                </tbody>
            </table>
            <!---->
            <!-- PAGINATION -->
            <div class="d-flex justify-content-center justify-content-md-end mb-5">
                <Pagination bind:propDatatable={objectDatatable} propSize="default" />
            </div>
            <!---->
        {/if}
    </div>
</div>

DEVELOPING

Once you've created a project and installed dependencies with npm install, start a development server:

npm run dev