Carbon Design Data Table with Pagination in Svelte

Question

I am trying to output a data table with a pagination-footer using the Carbon Design System in Svelte. I can not figure out how to combine the pagination-footer with the data table it self.

This is how I tried it. The pagination-footer is displayed but it does not matter what I select on the pagination-footer, the data-table does not change.

<script>
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm, Pagination } from "carbon-components-svelte";
</script>
<DataTable 
            sortable
            zebra
            {headers} 
            {rows}> 
</DataTable>
<Pagination totalItems={rows.length} pageSizes={[10, 15, 20]} />

I can not find any usable information on the Carbon Design System Documentation such as: Carbon Design System Documentation - Pagination Carbon Design System Documentation - Data Table

What am I missing? Which properties do I have to add to the pagination-footer so that the data table changes the view once I edit the option in the pagination-footer?

Answer 1

The components are not magically connected, you have to bind the values pageSize/page and pass them between the components. There is an example in the (relevant) docs:

<script>
  import { DataTable, Pagination } from "carbon-components-svelte";

  let rows = Array.from({ length: 10 }).map((_, i) => ({
    id: i,
    name: "Load Balancer " + (i + 1),
    protocol: "HTTP",
    port: 3000 + i * 10,
    rule: i % 2 ? "Round robin" : "DNS delegation",
  }));
  let pageSize = 5;
  let page = 1;
</script>

<DataTable
  sortable
  title="Load balancers"
  description="Your organization's active load balancers."
  headers={[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ]}
  {pageSize}
  {page}
  {rows}
/>
<Pagination
  bind:pageSize
  bind:page
  totalItems={rows.length}
  pageSizeInputDisabled
/>