Sorting
Published at Oct 15, 2024
Sorting columns is an important feature when working with data. The Datagrid supports sorting by multiple columns.
Barcode
Location
Category
Quantiy
Weight
3056519006086
Apt 1819
furniture
972
25.6
6861816867653
Suite 11
furniture
38
52.5
4697486394862
Apt 767
furniture
714
22.1
1507651383044
Suite 47
electronics
212
49.5
3050521118264
Room 1868
furniture
509
23.5
7247654023537
Room 1846
clothing
848
88.6
6687435198303
PO Box 75154
electronics
149
89
2530797670037
PO Box 39137
furniture
147
8.3
7524918686628
Room 1284
clothing
950
33.9
3209383758542
18th Floor
furniture
200
4
4885399982401
Suite 20
electronics
226
34.4
9040207608954
10th Floor
clothing
618
3.2
4481430085015
Suite 25
furniture
770
29.1
6570375480662
Suite 73
clothing
435
16
4677591243156
Apt 572
clothing
105
18.4
1477064628428
Room 1965
furniture
350
10.8
8748415132296
Apt 110
electronics
290
25.8
5101093419413
Room 139
clothing
69
80.4
3108485537297
Room 1571
clothing
201
49.2
9628053961836
Suite 97
electronics
856
13.8
Showing 0
:
20
of
40
[]
Implementation
Sorting can be enabled/disabled globally via datagrid options
options: {
sortable: false;
}and sorting for particullar column can be overwritten with setting in column definition
{
sortable: false,
}Code
Column definitions
import type { BaseColumn } from '$lib/datagrid/types';
import type { InventoryDataRow } from '$lib/data/inventory';
export const columns = [
{
id: 'barcode',
title: 'Barcode'
},
{
id: 'location',
title: 'Location',
sortable: false
},
{
id: 'category',
title: 'Category'
},
{
id: 'quantity',
title: 'Quantiy'
},
{
id: 'weight',
title: 'Weight',
grow: true
}
] satisfies BaseColumn<InventoryDataRow>[];Datagrid component
<script lang="ts">
import { setContext } from 'svelte';
import { columns } from './columns.svelte';
import { inventoryData as data } from '$lib/data/inventory';
import { TzezarDatagrid } from '$lib/datagrid/tzezar-datagrid.svelte';
import * as Datagrid from '$lib/datagrid';
let datagrid = setContext(
'datagrid',
new TzezarDatagrid({
data: data.slice(0, 40),
columns
})
);
</script>
<Datagrid.Datagrid>
{#snippet head()}
{#each datagrid.columns as column, i (column.id)}
<Datagrid.Header {column} />
{/each}
{/snippet}
{#snippet body()}
{#each datagrid.state.processedData as row, rowIndex}
<Datagrid.Row {rowIndex}>
{#each datagrid.columns as column, columnIndex}
{@const props = { row, rowIndex, column, columnIndex }}
<Datagrid.Cell {...props} />
{/each}
</Datagrid.Row>
{/each}
{/snippet}
</Datagrid.Datagrid>
<pre>{JSON.stringify(datagrid.state.sortingArray, null, 2)}</pre>