@isoftdata/svelte-table-card-footer

Svelte TableCardFooter

Install

pnpm i @isoftdata/svelte-table-card-footer

A Note on Types

The generic type I here represents an item in a table, outputted by one of the following props on the Table component, sortedRows,filteredRows, currentPageRows, or otherwise extend the IndexedRowProps interface exportd by the Table component.

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• CSVs will no longer include uuid or originalIndex columns, as those are just metadata fields that the user won't care about.

Props

Name	Type	Description	Default Value
selectedIds	Array<I[keyof I]> | SvelteSet<I[keyof I]>	An array or SvelteSet of selected item IDs. You should probably bind: this.	Required
items	Array<I>	An array of items to export to CSV. This should be sortedRows, filteredRows or currentPageRows from the Table component.	Required
idKey	keyof I	The unique key on each object in the items array used to track selected items. **This should be the same value as rowSelectionIdProp on the Table component.	'uuid'
showCount	boolean	Whether to show the total count of items in the footer	true
showExportAll	boolean	Whether to show the "Export All" button	true
showExportSelected	boolean	Whether to show the "Export Selected" button (when items are selected)	true
showClearSelection	boolean	Whether to show the "Clear Selection" button (when items are selected)	true
exportFileName	string	The file name for the exported CSV file	'list-export'
exportButtonClass	ClassValue | undefined	The class to apply to the export csv buttons	undefined
exportButtonColor	ComponentProps<Button>['color']	The BootStrap color of the export button	'primary'
exportButtonOutline	boolean	Whether the export button should be outlined	true
clearSelectionButtonClass	ClassValue | undefined	The class to apply to the "Clear Selection" button	undefined
clearSelectionButtonColor	ComponentProps<Button>['color']	The BootStrap color of the clear selection button	'warning'
clearSelectionButtonOutline	boolean	Whether the clear selection button should be outlined	true
exportAllLabel	string | Snippet<[{ totalCount: number}]>	The label for the "Export All" button	undefined
exportSelectedLabel	string | Snippet<[{ selectedCount: number, totalCount: number}]>	The label for the "Export {count} Selected" button	undefined
countDescription	string | Snippet<[{ selectedCount: number, totalCount: number}]>	The description for the item count at the bottom	undefined
footerClass	string	Any additional classes to add to the div.card-footer.d-flex	''
makeCsvItem	(item: I, index: number) => unknown	If passed, will be used to create the object for each CSV row. That way, you don't have to keep a reference to "rows for csv" in the consuming component	A function that removes uuid and originalIndex from the object

Snippets

• children - The content to be displayed before (to the left of) the export and clear selection buttons.
• right - The content to be displayed after (to the left of) the buttons.

Functions

You can call either of these functions to trigger a CSV download

• downloadCsv - downloads the CSV of all items
• downloadSelectedCsv - downloads the CSV of all selected items

Example

<script lang="ts">
	import type { Column, IndexedRowProps } from '@isoftdata/svelte-table'

	import TableCardFooter from '@isoftdata/svelte-table-card-footer'
	import Table from '@isoftdata/svelte-table'

	type Person = {
		id: string
		num: number
		name: string
		email: string
	}

	let columns: Array<Column> = [
		// stuff
	]

	let rows: Array<Person> = [
		// stuff
	]

	let selectedRowIds: Array<Person[keyof Person]> = []
	let currentPageRows: Array<Person & IndexedRowProps>

</script>

	<div class="card">
		<div class="card-header">
			<h4>Example Table Card Footer</h4>
			<h6>The <code>TableCardFooter</code> is not wrapped in a <code>div.table-footer</code> because it contains one.</h6>
		</div>
		<div class="card-body">
			<Table
				{columns}
				{rows}
				selectionEnabled
				bind:currentPageRows
				rowSelectionIdProp="id"
				bind:selectedRowIds
			/>
		</div>
		<TableCardFooter
			idKey="id"
			items={currentPageRows}
			bind:selectedIds={selectedRowIds}
		/>
	</div>```