lomer-ui

Component

Table

Organize and display data in a structured grid.

Installation

Usage

Preview

Month Expense $ Savings $
January 513 96
February 768 32
March 635 51
April 678 64
May 584 57
June 559 43
July 497 76

Svelte Code

1 
<script lang="ts">
2 
  import Table from '$lib/components/base/table.svelte';
3 
  import TableBody from '$lib/components/base/table-body.svelte';
4 
  import TableData from '$lib/components/base/table-data.svelte';
5 
  import TableHead from '$lib/components/base/table-head.svelte';
6 
  import TableHeader from '$lib/components/base/table-header.svelte';
7 
  import TableRow from '$lib/components/base/table-row.svelte';
8
9 
  const data = [
10 
    { month: 'January', expense: 513, savings: 96 },
11 
    { month: 'February', expense: 768, savings: 32 },
12 
    { month: 'March', expense: 635, savings: 51 },
13 
    { month: 'April', expense: 678, savings: 64 },
14 
    { month: 'May', expense: 584, savings: 57 },
15 
    { month: 'June', expense: 559, savings: 43 },
16 
    { month: 'July', expense: 497, savings: 76 }
17 
  ];
18 
</script>
19
20 
<Table>
21 
  <TableHead>
22 
    <TableRow>
23 
      <TableHeader>Month</TableHeader>
24 
      <TableHeader class="text-right">Expense $</TableHeader>
25 
      <TableHeader class="text-right">Savings $</TableHeader>
26 
    </TableRow>
27 
  </TableHead>
28 
  <TableBody>
29 
    {#each data as d}
30 
      <TableRow>
31 
        <TableData>{d.month}</TableData>
32 
        <TableData class="text-right font-mono">{d.expense}</TableData>
33 
        <TableData class="text-right font-mono">{d.savings}</TableData>
34 
      </TableRow>
35 
    {/each}
36 
  </TableBody>
37 
</Table>
38

Zebra

Preview

Month Expense $ Savings $
January 513 96
February 768 32
March 635 51
April 678 64
May 584 57
June 559 43
July 497 76

Svelte Code

1 
<script lang="ts">
2 
  import Table from '$lib/components/base/table.svelte';
3 
  import TableBody from '$lib/components/base/table-body.svelte';
4 
  import TableData from '$lib/components/base/table-data.svelte';
5 
  import TableHead from '$lib/components/base/table-head.svelte';
6 
  import TableHeader from '$lib/components/base/table-header.svelte';
7 
  import TableRow from '$lib/components/base/table-row.svelte';
8
9 
  const data = [
10 
    { month: 'January', expense: 513, savings: 96 },
11 
    { month: 'February', expense: 768, savings: 32 },
12 
    { month: 'March', expense: 635, savings: 51 },
13 
    { month: 'April', expense: 678, savings: 64 },
14 
    { month: 'May', expense: 584, savings: 57 },
15 
    { month: 'June', expense: 559, savings: 43 },
16 
    { month: 'July', expense: 497, savings: 76 }
17 
  ];
18 
</script>
19
20 
<Table>
21 
  <TableHead>
22 
    <TableRow>
23 
      <TableHeader>Month</TableHeader>
24 
      <TableHeader class="text-right">Expense $</TableHeader>
25 
      <TableHeader class="text-right">Savings $</TableHeader>
26 
    </TableRow>
27 
  </TableHead>
28 
  <TableBody zebra>
29 
    {#each data as d}
30 
      <TableRow>
31 
        <TableData>{d.month}</TableData>
32 
        <TableData class="text-right font-mono">{d.expense}</TableData>
33 
        <TableData class="text-right font-mono">{d.savings}</TableData>
34 
      </TableRow>
35 
    {/each}
36 
  </TableBody>
37 
</Table>
38

Outline

Preview

Month Expense $ Savings $
January 513 96
February 768 32
March 635 51
April 678 64
May 584 57
June 559 43
July 497 76

Svelte Code

1 
<script lang="ts">
2 
  import Table from '$lib/components/base/table.svelte';
3 
  import TableBody from '$lib/components/base/table-body.svelte';
4 
  import TableData from '$lib/components/base/table-data.svelte';
5 
  import TableHead from '$lib/components/base/table-head.svelte';
6 
  import TableHeader from '$lib/components/base/table-header.svelte';
7 
  import TableRow from '$lib/components/base/table-row.svelte';
8
9 
  const data = [
10 
    { month: 'January', expense: 513, savings: 96 },
11 
    { month: 'February', expense: 768, savings: 32 },
12 
    { month: 'March', expense: 635, savings: 51 },
13 
    { month: 'April', expense: 678, savings: 64 },
14 
    { month: 'May', expense: 584, savings: 57 },
15 
    { month: 'June', expense: 559, savings: 43 },
16 
    { month: 'July', expense: 497, savings: 76 }
17 
  ];
18 
</script>
19
20 
<Table>
21 
  <TableHead>
22 
    <TableRow>
23 
      <TableHeader>Month</TableHeader>
24 
      <TableHeader class="text-right">Expense $</TableHeader>
25 
      <TableHeader class="text-right">Savings $</TableHeader>
26 
    </TableRow>
27 
  </TableHead>
28 
  <TableBody outline>
29 
    {#each data as d}
30 
      <TableRow>
31 
        <TableData>{d.month}</TableData>
32 
        <TableData class="text-right font-mono">{d.expense}</TableData>
33 
        <TableData class="text-right font-mono">{d.savings}</TableData>
34 
      </TableRow>
35 
    {/each}
36 
  </TableBody>
37 
</Table>
38

Clickable

Preview

Month Expense $ Savings $
January 513 96
February 768 32
March 635 51
April 678 64
May 584 57
June 559 43
July 497 76

Svelte Code

1 
<script lang="ts">
2 
  import Table from '$lib/components/base/table.svelte';
3 
  import TableBody from '$lib/components/base/table-body.svelte';
4 
  import TableData from '$lib/components/base/table-data.svelte';
5 
  import TableHead from '$lib/components/base/table-head.svelte';
6 
  import TableHeader from '$lib/components/base/table-header.svelte';
7 
  import TableRow from '$lib/components/base/table-row.svelte';
8
9 
  const data = [
10 
    { month: 'January', expense: 513, savings: 96 },
11 
    { month: 'February', expense: 768, savings: 32 },
12 
    { month: 'March', expense: 635, savings: 51 },
13 
    { month: 'April', expense: 678, savings: 64 },
14 
    { month: 'May', expense: 584, savings: 57 },
15 
    { month: 'June', expense: 559, savings: 43 },
16 
    { month: 'July', expense: 497, savings: 76 }
17 
  ];
18
19 
  function onclick() {
20 
    alert('You clicked a row.');
21 
  }
22 
</script>
23
24 
<Table>
25 
  <TableHead>
26 
    <TableRow>
27 
      <TableHeader>Month</TableHeader>
28 
      <TableHeader class="text-right">Expense $</TableHeader>
29 
      <TableHeader class="text-right">Savings $</TableHeader>
30 
    </TableRow>
31 
  </TableHead>
32 
  <TableBody zebra outline>
33 
    {#each data as d}
34 
      <TableRow clickable {onclick}>
35 
        <TableData>{d.month}</TableData>
36 
        <TableData class="text-right font-mono">{d.expense}</TableData>
37 
        <TableData class="text-right font-mono">{d.savings}</TableData>
38 
      </TableRow>
39 
    {/each}
40 
  </TableBody>
41 
</Table>
42