@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
}

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
}

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.