rtk-paginated-list

Properties

Property	Type	Required	Default	Description
`autoScroll`	`boolean`	✅	-	auto scroll list to bottom
`createNodes`	`(data: unknown[]) => VNode[]`	✅	-	Create nodes
`emptyListLabel`	`string`	✅	-	label to show when empty
`fetchData`	`(timestamp: number, size: number, reversed: boolean) => Promise<unknown[]>`	✅	-	Fetch the data
`iconPack`	`IconPack`	❌	`defaultIconPack`	Icon pack
`onNewNode`	`(node: DataNode) => Promise<void>`	✅	-	Adds a new node to the beginning of the paginated list
`onNodeDelete`	`(id: string) => Promise<void>`	✅	-	Deletes a node anywhere from the list
`onNodeUpdate`	`(id: string, node: DataNode) => Promise<void>`	✅	-	Updates an existing node in the paginated list.
`pageSize`	`number`	✅	-	Page Size
`pagesAllowed`	`number`	✅	-	Number of pages allowed to be shown
`rerenderList`	`() => Promise<void>`	✅	-	Rerender paginated list
`reset`	`(timestamp?: number) => Promise<void>`	❌	-	Resets the paginated list to a given timestamp
`t`	`RtkI18n`	❌	`useLanguage()`	Language

Usage Examples

Basic Usage

<rtk-paginated-list></rtk-paginated-list>

With Properties

<rtk-paginated-list
 emptyListLabel="example"
 fetchData="md"
 onNodeDelete="example">
</rtk-paginated-list>

<script>
  const el = document.querySelector("rtk-paginated-list");

  el.autoScroll = true;
  el.createNodes = handleEvent;
  el.fetchData = true;
</script>