PaginatedTable

Table and pagination agreement, with an upgrade.

Example

Props

🕹️ standard props
headersToShowInTable
Header[]
Defines the table columns to show in the table.
pinnableColumns
boolean
Enables pin button in the headers drawer.
false
headerDrawerProps
object
Props of the headers drawer
🎨 style props
--enhanced-paginated-table-default-customize-headers-icon-size
size
Icon size for the customize headers icon
17px;

Slots

headerDrawerContentSnippet
Headers drawer custom content
headerDrawerHeadersToAddSnippet

Headers drawer custom items

Default content:

<div
  style:display=flex
>
  <div
    style:flex-grow=1
  >
    {#if !!item.icon}
      <Icon name={item.icon} />
    {/if}
    {item.name}
  </div>
  <div
    style:display=flex
    style:min-width=50px
    style:justify-content=end
  >
    <Switch
      --switch-label-width="90%"
      value={headersToShow.find((h) => h.id == item.id) != undefined}
      onchange={(e) => {
        if (e.detail.value == false) {
          headersToShow = headersToShow.filter((h) => h.id != item.id);
          availableHeaders = [...availableHeaders, item];
        }
      }}
    />
  </div>
</div>

Available variables:

Name	Type	Description
item	Header	The item being rendered.

headerDrawerItemSnippet

Headers drawer custom headers to add

Default content:

<div
  class="headers-show"
>
  <div
    style:display=flex
  >
    <div
      style:flex-grow=1
    >
      {#if !!header.icon}
        <Icon name={header.icon} />
      {/if}
      {header.name}
    </div>
    <div
      style:display=flex
      style:min-width=50px
      style:justify-content=end
    >
      <Switch
        --switch-label-width="90%"
        value={false}
        onchange={(e) => {
          if (e.detail.value == true) {
            availableHeaders = availableHeaders.filter(
              (h) => h.id != header.id
            );
            headersToShow = [...headersToShow, header];
          }
        }}
      />
    </div>
  </div>
</div>

Available variables:

Name	Type	Description
header	{ id: string; name: string; }	The item being rendered.

Events

onsaveHeadersToShow

Triggered when the user saves which headers to show

Attribute	Type	Description
headersToShow	Header[]	Selected headers to show