mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): support paginated data table (#880)

Browse source 
Closes #702
This commit is contained in:
kwieszalka-maystreet 2022-01-19 16:51:42 +01:00 • committed by GitHub
commit 5da83ec869
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 131 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/DataTable/DataTable.svelte
View file

@ -100,6 +100,12 @@
/** Set to `true` to use static width */
export let useStaticWidth = false;
/** Specify the number of items to display in a page */
export let pageSize = 0;
/** Set to `number` to set current page */
export let page = 0;
import { createEventDispatcher, setContext } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronRight16 from "../icons/ChevronRight16.svelte";
@ -216,6 +222,12 @@
});
}
}
const getDisplayedRows = (rows, page, pageSize) =>
page && pageSize
? rows.slice((page - 1) * pageSize, page * pageSize)
: rows;
$: displayedRows = getDisplayedRows(rows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
</script>
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
@ -326,7 +338,7 @@
</TableRow>
</TableHead>
<TableBody>
{#each sorting ? sortedRows : rows as row, i (row.id)}
{#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
<TableRow
id="row-{row.id}"
class="{selectedRowIds.includes(row.id)