-
Notifications
You must be signed in to change notification settings - Fork 268
/
TestTable.svelte
59 lines (50 loc) · 1.31 KB
/
TestTable.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script lang="ts">
import Table from './Table.svelte';
import { Column, Row } from './table';
import SimpleColumn from './SimpleColumn.svelte';
let table: Table;
let selectedItemsNumber: number;
type Person = {
id: number;
name: string;
age: number;
};
const people: Person[] = [
{ id: 1, name: 'John', age: 57 },
{ id: 2, name: 'Henry', age: 27 },
{ id: 3, name: 'Charlie', age: 43 },
];
const idCol: Column<Person> = new Column('Id', {
align: 'right',
renderMapping: obj => obj.id,
renderer: SimpleColumn,
comparator: (a, b) => a.id - b.id,
});
const nameCol: Column<Person> = new Column('Name', {
width: '3fr',
renderMapping: obj => obj.name,
renderer: SimpleColumn,
comparator: (a, b) => a.name.localeCompare(b.name),
});
const ageCol: Column<Person> = new Column('Age', {
align: 'right',
renderMapping: obj => obj.age,
renderer: SimpleColumn,
comparator: (a, b) => a.age - b.age,
initialOrder: 'descending',
});
const columns: Column<Person>[] = [idCol, nameCol, ageCol];
const row = new Row<Person>({
selectable: person => person.age < 50,
disabledText: 'People over 50 cannot be deleted',
});
</script>
<Table
kind="people"
bind:this="{table}"
bind:selectedItemsNumber="{selectedItemsNumber}"
data="{people}"
columns="{columns}"
row="{row}"
defaultSortColumn="Id">
</Table>