Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toolbar-search): add filteredRowIds prop to support pagination #1454

Merged
merged 4 commits into from Aug 18, 2022

Conversation

metonym
Copy link
Collaborator

@metonym metonym commented Aug 18, 2022

Closes #1393

Currently, the built-in filter behavior for DataTable does not support pagination. For example, filtering a table will not update the total items displayed in the Pagination component.

This can be solved by exposing the filtered row ids in ToolbarSearch through a filteredRowIds prop. The value of this prop can be bound to and passed to Pagination and is generally useful.

Sample Usage

<script>
  import {
    DataTable,
    Toolbar,
    ToolbarContent,
    ToolbarSearch,
    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;
  let filteredRowIds = [];

  $: console.log("filteredRowIds", filteredRowIds);
</script>

<DataTable
  headers="{[
    { key: 'name', value: 'Name' },
    { key: 'protocol', value: 'Protocol' },
    { key: 'port', value: 'Port' },
    { key: 'rule', value: 'Rule' },
  ]}"
  rows="{rows}"
  pageSize="{pageSize}"
  page="{page}"
>
  <Toolbar>
    <ToolbarContent>
      <ToolbarSearch
        persistent
        value="round"
        shouldFilterRows
        bind:filteredRowIds
      />
    </ToolbarContent>
  </Toolbar>
</DataTable>

<Pagination
  bind:pageSize
  bind:page
  totalItems="{filteredRowIds.length}"
  pageSizeInputDisabled
/>

This PR updates and simplifies the filterable DataTable examples.

@metonym metonym merged commit dbe33d5 into master Aug 18, 2022
@metonym metonym deleted the toolbar-filtered-row-ids branch August 18, 2022 13:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

shouldFilterRows Does Not Display Correct Number of Results
1 participant