@radar-azdelta/svelte-datatable

Why yet another datatable component? During the development of Keun, we needed a datatable component that could handle CSV's with more than 100.000 rows. We didn't find anything that suited our needs, so we developed our own.

Features

• Supports multiple data sources: array of object, matrix of values, Function (remote data source) and File (CSV datasource)
• Sorting (multi column)
• Filtering (multi column)
• Reposition columns
• Resize columns
• Store column settings in localStorage
• Show/hide columns
• Fast for very large CSV files (more than 100.000 rows)
• Uses Arquero in a web worker for File (CSV) data source

Usage

install the package

pnpm install @radar-azdelta/svelte-datatable

add the component to a svelte page

<script lang="ts">
  import DataTable from '@radar-azdelta/svelte-datatable'

  const data = [
    {
      name: 'Rory',
      age: 35,
      country: 'Belgium',
      telephone: '0800-123-524-634',
      address: 'Rue des Taillis 221,Gijzelbrechtegem,West Flanders,8570,',
    },
    {
      name: 'Amethyst',
      age: 35,
      country: 'Belgium',
      telephone: '0800-123-524-634',
      address: 'Eikstraat 450,Belgrade,Namur,5001,',
    },
  ]
</script>

<DataTable {data} />

Also add the folowing config to your vite.config.ts, otherwise @radar-azdelta/svelte-datatable worker can't be downloaded.

export default defineConfig({
  ...
  optimizeDeps: {
    exclude: ['@radar-azdelta/svelte-datatable'],
  }
  ...
})

Example

see demo site

Manual

Properties

The DataTable component accepts 3 properties: options, columns, and data.

<DataTable {options} {columns} {data} />

Options property

global options for the DataTable

interface ITableOptions {
  id?: string
  currentPage?: number
  rowsPerPage?: number
  rowsPerPageOptions?: number[]
  actionColumn?: boolean
}

| Value | Description | Required | Default | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------------------- | | id | identifier for the datatable, so that it settings can be stored in localStorage | no | | | currentPage | the current page to display | no | 1 | | rowsPerPage | number of rows visible in a page | no | 20 | | rowsPerPageOptions | number of rows visible in a page | no | [5, 10, 20, 50, 100] | | actionColumn | Adds an action column as first column. This can be used to add aditional functionality, for example 'selecting multiple columns', or 'add custom action buttoms', etc... | no | false |

Columns property

The columns can be extracted from the data property (except when the data is a matrix). But you can also manually define the columns.

interface IColumnMetaData {
  id: string
  label?: string
  visible?: boolean
  sortable?: boolean
  filterable?: boolean
  resizable?: boolean
  repositionable?: boolean
  sortDirection?: SortDirection
  sortOrder?: number
  filter?: any
  position?: number
  width?: number
}

| Value | Description | Required | Default | | ------------------ | --------------------------------------------------------------------------- | -------- | ------- | | id | id or name of the column | yes | | | label | id or name of the column | no | | | visible | is the column visible | no | yes | | sortable | is the column sortable | no | yes | | filterable | is the column filterable | no | yes | | resizable | FUTURE FUNCTIONALITY: can the column width be adjusted | no | yes | | repositionable | can the column be repositioned | no | yes | | sortDirection | do not sort (undefined), sort the column 'asc' or 'desc' | no | | | sortOrder | if multiple columns are sorted, this prop defines the sequence of the order | no | | | filter | filter the column values | no | | | position | the visual position (sequence) of the column | no | | | width | FUTURE FUNCTIONALITY: the width of the column | no | |

Data property

• Array of Objects

const data = [
  {
    name: 'Rory',
    age: 35,
    country: 'Belgium',
    telephone: '0800-123-524-634',
    address: 'Rue des Taillis 221,Gijzelbrechtegem,West Flanders,8570,',
  },
  {
    name: 'Amethyst',
    age: 35,
    country: 'Belgium',
    telephone: '0800-123-524-634',
    address: 'Eikstraat 450,Belgrade,Namur,5001,',
  },
]

• Matrix (requires the columns property)

const data = [
  ['Rory', 35, 'Belgium', '0800-123-524-634', 'Rue des Taillis 221,Gijzelbrechtegem,West Flanders,8570,'],
  ['Amethyst', 35, 'Belgium', '0800-123-524-634', 'Eikstraat 450,Belgrade,Namur,5001,'],
]

• Function (fetch from webservice)

async function fetchData(
  filteredColumns: Map<string, TFilter>,
  sortedColumns: Map<string, SortDirection>,
  pagination: IPagination
): Promise<{ totalRows: number; data: any[][] | any[] }> {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ filteredColumns: [...filteredColumns], sortedColumns: [...sortedColumns], pagination }),
  })
  const result = response.json()
  return { totalRows: result.totalRows, data: result.data }
}

• File (CSV)

const response = await fetch('https://raw.githubusercontent.com/RADar-AZDelta/AZDelta-OMOP-CDM/main/drug_exposure/drug_concept_id/medicatie_usagi.csv')
const blob = await response.blob()
const metadata = {
  type: 'text/csv',
}
const data = new File([data], 'medicatie_usagi.csv', metadata)

Setup for development

Run these commands to get started:

git clone [email protected]:RADar-AZDelta/svelte-datatable.git
cd svelte-datatable
pnpm install

To run the example app, run pnpm run dev --open from the project root.

Reorder Column

Resize Column

Visible Columns

Edit cell

Als EditableCell is toegevoegd in het Datatable component dan kan u doubel klikken op de tekst om die aan te passen.
escape key kan gebruikt worden om uit de input te gaan zonder aanpassing op te slaan.
enter key kan gebruikt worden of check button om de aanpassing op te slaan.