svelte-material-ui/packages/site/src/routes/demo/data-table/_RowSelection.svelte at master · hperrin/svelte-material-ui · GitHub

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
60
61
62
63
64
65
66
67
68
69
70
71
<DataTable style="max-width: 100%;">
  <Head>
    <Row>
      <Cell checkbox>
        <Checkbox />
      </Cell>
      <Cell>Name</Cell>
      <Cell>Description</Cell>
      <Cell numeric>Price</Cell>
    </Row>
  </Head>
  <Body>
    {#each options as option (option.name)}
      <Row>
        <Cell checkbox>
          <Checkbox
            bind:group={selected}
            value={option}
            valueKey={option.name}
          />
        </Cell>
        <Cell>{option.name}</Cell>
        <Cell>{option.description}</Cell>
        <Cell numeric>{option.price}</Cell>
      </Row>
    {/each}
  </Body>
</DataTable>

<pre class="status">Selected: {selected
    .map((option) => option.name)
    .join(', ')}</pre>
<pre class="status">Total: {selectedPrice}</pre>

<script lang="ts">
  import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
  import Checkbox from '@smui/checkbox';

  let options = $state([
    {
      name: 'Broom',
      description: 'A wooden handled broom.',
      price: 15,
    },
    {
      name: 'Dust Pan',
      description: 'A plastic dust pan.',
      price: 8,
    },
    {
      name: 'Mop',
      description: 'A strong, durable mop.',
      price: 18,
    },
    {
      name: 'Horse',
      description: "She's got some miles on her.",
      price: 83,
    },
    {
      name: 'Bucket',
      description: 'A metal bucket.',
      price: 13,
    },
  ]);
  let selected = $state([options[2]]);

  const selectedPrice = $derived(
    selected.reduce((total, option) => option.price + total, 0),
  );
</script>