✨ Add DataTable component for Svelte

Author: Frontendland

src/components/DataTable/DataTable.astro

@@ -103,7 +103,7 @@ const hasPagination = data?.length && itemsPerPage
                     itemGroups={columnToggleItems}
                     position="bottom-end"
                     value={columnToggleLabel}
-                    placeholder={columnToggleLabel}
+                    updateValue={false}
                 />
             )}
         </div>
@@ -286,18 +286,16 @@ const hasPagination = data?.length && itemsPerPage
 
     listen('selectOnChange', event => {
         const eventName = event.name.toLowerCase().replace(/\s/g, '')
-        const table = event.selectElement
-            .closest('section')
-            .querySelector('table')
+        const table = (document.querySelector(`[data-id="w-select-${event.select}"]`)
+            ?.closest('section') as HTMLElement)
+            .querySelector('table') as HTMLTableElement
 
         const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
 
         const columnToggleListElement = Array.from(event.list.children)
             .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement
         const svgIcon = columnToggleListElement.children[0] as HTMLElement
 
-        event.selectElement.value = event.selectElement.placeholder
-
         svgIcon.style.opacity = svgIcon.style.opacity === '0'
             ? '1'
             : '0'

src/components/DataTable/DataTable.svelte

@@ -1,3 +1,269 @@
 <script lang="ts">
+    import type { HeadingObject, SvelteDataTableProps } from './datatable'
 
+    import Button from '../Button/Button.svelte'
+    import Input from '../Input/Input.svelte'
+    import Pagination from '../Pagination/Pagination.svelte'
+    import Select from '../Select/Select.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { debounce } from '../../utils/debounce'
+
+    import checkIcon from '../../icons/check.svg?raw'
+    import orderIcon from '../../icons/order.svg?raw'
+    import searchIcon from '../../icons/search.svg?raw'
+
+    import styles from './datatable.module.scss'
+
+    import type { ListEventType } from '../List/list'
+
+    export let headings: SvelteDataTableProps['headings'] = []
+    export let filterPlaceholder: SvelteDataTableProps['filterPlaceholder'] = 'Filter entries'
+    export let showFilterIcon: SvelteDataTableProps['showFilterIcon'] = false
+    export let noResultsLabel: SvelteDataTableProps['noResultsLabel'] = 'No results.'
+    export let itemsPerPage: SvelteDataTableProps['itemsPerPage'] = null
+    export let subText: SvelteDataTableProps['subText'] = ''
+    export let columnToggleLabel: SvelteDataTableProps['columnToggleLabel'] = 'Columns'
+    export let pagination: SvelteDataTableProps['pagination'] = {}
+    export let data: SvelteDataTableProps['data'] = []
+    export let hover: SvelteDataTableProps['hover'] = false
+    export let striped: SvelteDataTableProps['striped'] = null
+    export let offsetStripe: SvelteDataTableProps['offsetStripe'] = false
+    export let compact: SvelteDataTableProps['compact'] = false
+    export let maxHeight: SvelteDataTableProps['maxHeight'] = ''
+    export let className: SvelteDataTableProps['className'] = ''
+    export let onFilter: SvelteDataTableProps['onFilter'] = () => {}
+
+    let filteredData: any = data
+    let toggledData: any = filteredData
+    let filteredHeadings: any = headings
+    let page: number = 1
+    let hasActiveFilter: boolean = false
+    let sortOrder = 1
+
+    const classes = classNames([
+        styles.table,
+        hover && styles.hover,
+        striped && styles[`striped-${striped}s`],
+        offsetStripe && styles.offset,
+        compact && styles.compact,
+        maxHeight && styles.scroll
+    ])
+
+    const footerClasses = classNames([
+        styles.footer,
+        subText && styles.between
+    ])
+
+    const showColumnToggle = headings?.some(heading => {
+        return typeof heading === 'string' ? false : heading.toggleable
+    })
+
+    const columnToggleItems = [{
+        items: headings?.length ? headings
+            .filter(heading => typeof heading !== 'string' && heading.toggleable)
+            .map(heading => ({
+                icon: checkIcon,
+                name: (heading as HeadingObject).name,
+                value: String(headings.findIndex(h => {
+                    return (h as HeadingObject).name === (heading as HeadingObject).name
+                }))
+            })) : []
+    }]
+
+    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
+        .map((heading, index) => heading ? index : null)
+        .filter(heading => heading !== null) || []
+
+    const hasPagination = data?.length && itemsPerPage
+        ? data.length > itemsPerPage
+        : false
+
+    const filter = debounce((event: Event) => {
+        const target = event.target as HTMLInputElement
+
+        hasActiveFilter = !!target.value
+
+        filteredData = toggledData?.filter((row: string[]) => {
+            const rowValue = row.filter((_, index) => columnFilterIndexes.includes(index))
+                .join('')
+                .toLowerCase()
+
+            return rowValue.includes(target.value.toLowerCase())
+        })
+
+        onFilter?.({
+            results: filteredData,
+            numberOfResults: filteredData.length
+        })
+    }, 400)
+
+    const toggleColumns = (event: ListEventType) => {
+        const columnToggleListElement = Array.from(event.list.children)
+            .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement
+        const svgIcon = columnToggleListElement.children[0] as HTMLElement
+
+        svgIcon.style.opacity = svgIcon.style.opacity === '0'
+            ? '1'
+            : '0'
+
+        if (svgIcon.style.opacity === '0') {
+            filteredData = filteredData?.map((row: string[]) => {
+                return row.map((column, index) => index === Number(event.value) ? null : column)
+            })
+
+            filteredHeadings = filteredHeadings.map((heading: HeadingObject | string) => {
+                return ((heading as HeadingObject)?.name || heading) === event.name ? null : heading
+            })
+        } else {
+            filteredData = filteredData?.map((row: string[], x: number) => {
+                return row.map((column, y) => y === Number(event.value) ? data?.[x][y] : column)
+            })
+
+            filteredHeadings = filteredHeadings.map((heading: HeadingObject | string, index: number) => {
+                return ((headings?.[index] as HeadingObject)?.name || headings?.[index]) === event.name
+                    ? headings?.[index]
+                    : heading
+            })
+        }
+
+        toggledData = filteredData
+    }
+
+    const sort = (index: number) => {
+        filteredData = filteredData.sort((a: string[], b: string[]) => {
+            let aValue: string | number = a[index]
+            let bValue: string | number = b[index]
+
+            if (!isNaN(aValue as any)) {
+                aValue = Number(aValue)
+            }
+
+            if (!isNaN(bValue as any)) {
+                bValue = Number(bValue)
+            }
+
+            return aValue > bValue
+                ? sortOrder * -1
+                : sortOrder
+        })
+
+        sortOrder = sortOrder === 1 ? -1 : 1
+    }
+
+    $: isNextPage = (index: number) => {
+        if (hasPagination && itemsPerPage && !hasActiveFilter) {
+            const currentPage = Math.ceil((index + 1) / itemsPerPage)
+
+            return currentPage !== page ? 'true' : undefined
+        }
+
+        if (hasActiveFilter && itemsPerPage) {
+            return index >= itemsPerPage ? 'true' : undefined
+        }
+
+        return undefined
+    }
 </script>
+
+<section class={className}>
+    {#if columnFilterIndexes?.length || showColumnToggle}
+        <div class={styles.filters}>
+            {#if columnFilterIndexes?.length}
+                {#if showFilterIcon}
+                    <Input
+                        type="search"
+                        placeholder={filterPlaceholder}
+                        onInput={filter}
+                    >
+                        {@html searchIcon}
+                    </Input>
+                {:else}
+                    <Input
+                        type="search"
+                        placeholder={filterPlaceholder}
+                        onInput={filter}
+                    />
+                {/if}
+            {/if}
+            {#if showColumnToggle}
+                <Select
+                    name={`data-table-${crypto.randomUUID()}`}
+                    itemGroups={columnToggleItems}
+                    position="bottom-end"
+                    value={columnToggleLabel}
+                    onChange={toggleColumns}
+                    updateValue={false}
+                />
+            {/if}
+        </div>
+    {/if}
+
+    <div
+        class={classes}
+        style={maxHeight ? `max-height:${maxHeight}` : undefined}
+    >
+        <table>
+            {#if filteredHeadings?.length}
+                <thead>
+                    <tr>
+                        {#each filteredHeadings as heading, index}
+                            {#if heading}
+                                <th>
+                                    {#if heading.sortable}
+                                        <Button theme="flat" slot="wrapper" onClick={() => sort(index)}>
+                                            {heading.name || heading}
+                                            {@html orderIcon}
+                                        </Button>
+                                    {:else}
+                                        {heading.name || heading}
+                                    {/if}
+                                </th>
+                            {/if}
+                        {/each}
+                    </tr>
+                </thead>
+            {/if}
+
+            <tbody>
+                {#if filteredData?.length}
+                    {#each filteredData as row, index}
+                        <tr data-hidden={isNextPage(index)}>
+                            {#each row as column}
+                                {#if column}
+                                    <td>
+                                        {@html column}
+                                    </td>
+                                {/if}
+                            {/each}
+                        </tr>
+                    {/each}
+                {/if}
+                <slot />
+            </tbody>
+            {#if columnFilterIndexes?.length && !filteredData.length}
+                <tfoot>
+                    <tr>
+                        <td colspan={data?.[0].length} class={styles['no-results']}>
+                            {noResultsLabel}
+                        </td>
+                    </tr>
+                </tfoot>
+            {/if}
+        </table>
+    </div>
+    {#if subText || hasPagination}
+        <div class={footerClasses}>
+            {#if subText}
+                <span class={styles.subtext}>{subText}</span>
+            {/if}
+            {#if hasPagination && itemsPerPage && !hasActiveFilter}
+                <Pagination
+                    {...pagination}
+                    totalPages={Math.ceil((data?.length || 0) / itemsPerPage)}
+                    onChange={event => page = event.page}
+                />
+            {/if}
+        </div>
+    {/if}
+</section>

src/components/DataTable/datatable.ts

@@ -1,5 +1,10 @@
 import type { PaginationProps } from '../Pagination/pagination'
 
+export type DataTableEventType = {
+    results: string[][]
+    numberOfResults: number
+}
+
 export type HeadingObject = {
     name: string
     sortable?: boolean
@@ -12,7 +17,7 @@ export type DataTableProps = {
     filterPlaceholder?: string
     showFilterIcon?: boolean
     noResultsLabel?: string
-    itemsPerPage?: number
+    itemsPerPage?: number | null
     subText?: string
     columnToggleLabel?: string
     pagination?: PaginationProps
@@ -24,3 +29,11 @@ export type DataTableProps = {
     maxHeight?: string
     className?: string
 }
+
+export type SvelteDataTableProps = {
+    onFilter?: (event: DataTableEventType) => void
+} & DataTableProps
+
+export type ReactDataTableProps = {
+    onFilter?: (event: DataTableEventType) => void
+} & DataTableProps

src/components/Table/Table.svelte

@@ -12,7 +12,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
-    export let maxHeight: TableProps['maxHeight'] = 0
+    export let maxHeight: TableProps['maxHeight'] = ''
     export let className: TableProps['className'] = ''
 
     const classes = classNames([

src/data.js

@@ -202,3 +202,36 @@ export const pagesWithCustomLabels = [
     { label: 'Latest' },
     { label: 'Trending', active: true }
 ]
+
+export const headings = [
+    { name: 'User ID', toggleable: true, sortable: true, filterable: true },
+    { name: 'Score', toggleable: true, sortable: true, filterable: true },
+    'Status'
+]
+
+export const toggleableHeadings = [
+    { name: 'User ID', toggleable: true },
+    { name: 'Score', toggleable: true },
+    'Status'
+]
+
+export const filterableHeadings = [
+    { name: 'User ID', toggleable: true, filterable: true },
+    { name: 'Score', toggleable: true, filterable: true },
+    'Status'
+]
+
+export const dataTableEntries = [
+    ['#1', '47', 'suspended'],
+    ['#2', '195', 'inactive'],
+    ['#3', '177', 'inactive'],
+    ['#4', '4', 'inactive'],
+    ['#5', '145', 'active'],
+    ['#6', '299', 'suspended'],
+    ['#7', '150', 'active'],
+    ['#8', '23', 'active'],
+    ['#9', '92', 'active'],
+    ['#10', '68', 'inactive'],
+    ['#11', '121', 'inactive'],
+    ['#12', '160', 'inactive']
+]