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

2
COMPONENT_INDEX.md
View file

@ -997,6 +997,8 @@ export interface DataTableCell {
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| pageSize | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
| page | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
### Slots

22
docs/src/COMPONENT_API.json
View file

@ -2384,6 +2384,28 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "pageSize",
"kind": "let",
"description": "Specify the number of items to display in a page",
"type": "number",
"value": "0",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "page",
"kind": "let",
"description": "Set to `number` to set current page",
"type": "number",
"value": "0",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"slots": [

84
docs/src/pages/components/DataTable.svx
View file

@ -1,11 +1,13 @@
---
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
---
<script>
import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
const pagination = { pageSize: 5, page: 1}
</script>
`DataTable` is keyed for both rendering and sorting purposes.
@ -792,6 +794,84 @@ In the example below, the "Protocol" column is not sortable.
]}"
/>
### Sortable with pagination
If you want `DataTable` to sort the whole dataset but still display paginated content, you need to pass the whole dataset in the `rows` prop,
and then limit displayed content by using `pageSize` and `page` props, which are corresponding to the same props in the `Pagination` component.
<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: "cost", value: "Cost", display: (cost) => cost + " €" },
{
key: "expireDate",
value: "Expire date",
display: (date) => new Date(date).toLocaleString(),
sort: (a, b) => new Date(a) - new Date(b),
},
]}"
pageSize={pagination.pageSize}
page={pagination.page}
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
cost: 100,
expireDate: "2020-10-21",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
cost: 200,
expireDate: "2020-09-10",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
cost: 150,
expireDate: "2020-11-24",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
cost: 250,
expireDate: "2020-12-01",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
cost: 550,
expireDate: "2021-03-21",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
cost: 400,
expireDate: "2020-11-14",
},
]}"
/>
<Pagination
bind:pageSize={pagination.pageSize}
bind:page={pagination.page}
totalItems={6}
pageSizeInputDisabled
/>
### Sortable with custom display and sort methods
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."

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)

12
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -141,6 +141,18 @@ export interface DataTableProps
* @default false
*/
useStaticWidth?: boolean;
/**
* Specify the number of items to display in a page
* @default 0
*/
pageSize?: number;
/**
* Set to `number` to set current page
* @default 0
*/
page?: number;
}
export default class DataTable extends SvelteComponentTyped<