Skip to content
Pelatform UI

Data displayExtension

DataTable

Search, sort, page, select and export the rows of a native table already in your HTML.

Class nameTypeDescription
datatableplf:datatableComponentWraps a Table and its controls
datatable-toolbarplf:datatable-toolbarPartThe search and settings row above the table
datatable-filtersplf:datatable-filtersPartThe column filter fields
datatable-filterplf:datatable-filterPartThe search field
datatable-filter-countplf:datatable-filter-countPartThe Filters disclosure's active count
datatable-filter-chipsplf:datatable-filter-chipsPartThe row of active filter buttons
datatable-filter-chipplf:datatable-filter-chipPartAn active filter button your script adds
datatable-settingsplf:datatable-settingsPartThe toolbar's settings and export controls
datatable-densityplf:datatable-densityPartThe density label and select
datatable-disclosureplf:datatable-disclosurePartA compact Collapsible for filters or column layout
datatable-columns-panelplf:datatable-columns-panelPartThe columns Popover panel
datatable-columns-headingplf:datatable-columns-headingPartThe columns panel's title row
datatable-column-settingsplf:datatable-column-settingsPartA list of column settings
datatable-column-settingplf:datatable-column-settingPartOne column's width and move controls
datatable-column-choiceplf:datatable-column-choicePartA column's show or hide checkbox
datatable-column-actionsplf:datatable-column-actionsPartA column's width range and move buttons
datatable-column-togglesplf:datatable-column-togglesPartThe column checkboxes
datatable-views-panelplf:datatable-views-panelPartThe saved views Popover panel
datatable-views-headingplf:datatable-views-headingPartThe views panel's title row
datatable-view-actionsplf:datatable-view-actionsPartThe views panel's buttons
datatable-view-saveplf:datatable-view-savePartThe full-width Save view button
datatable-export-panelplf:datatable-export-panelPartThe export Popover panel
datatable-export-headerplf:datatable-export-headerPartThe export panel's title row
datatable-export-optionsplf:datatable-export-optionsPartThe download format buttons
datatable-export-utilitiesplf:datatable-export-utilitiesPartThe Copy and Print buttons
datatable-export-extensionplf:datatable-export-extensionPartA format's file extension
datatable-export-actionplf:datatable-export-actionPartA full-width download format button
datatable-export-statusplf:datatable-export-statusPartThe export message, hidden while empty
datatable-bulkplf:datatable-bulkPartThe bar shown while rows are selected
datatable-headingplf:datatable-headingPartThe sort button and rank the script adds to a header
datatable-sort-buttonplf:datatable-sort-buttonPartA header's sort button the script adds
datatable-sort-iconplf:datatable-sort-iconPartThe sort direction arrow the script adds
datatable-sort-rankplf:datatable-sort-rankPartA column's place in a multi-sort, which the script adds
datatable-emptyplf:datatable-emptyPartThe no-results message
datatable-statusplf:datatable-statusPartThe muted text with the counters
datatable-footerplf:datatable-footerPartThe status and paging row below the table
datatable-paginationplf:datatable-paginationPartThe page size and page buttons
datatable-page-sizeplf:datatable-page-sizePartThe rows per page label and select
datatable-page-jumpplf:datatable-page-jumpPartThe page input and page count
datatable-page-inputplf:datatable-page-inputPartThe page number input
datatable-pagesplf:datatable-pagesPartThe paging buttons' navigation
datatable-numbered-pagesplf:datatable-numbered-pagesPartThe numbered page buttons' container
datatable-pageplf:datatable-pagePartA numbered page button the script adds from the template
datatable-previous-iconplf:datatable-previous-iconPartYour own first or previous page icon, in place of the drawn chevrons: a forward one, mirrored to point back
datatable-next-iconplf:datatable-next-iconPartYour own next or last page icon, in place of the drawn chevrons, mirrored in right-to-left text

Default

Author the data-plf-datatable-controls groups hidden: the script shows them and adds a sort button to each data-plf-datatable-sortable header, so without JavaScript the table still lists every row.

Contacts
Name Email Revenue Status
Avery Stone avery@example.test $316.00 Customer
Blair Chen blair@example.test $242.00 Customer
Casey Rivera casey@example.test $837.00 Customer
Devon Patel devon@example.test $874.00 Customer
Finley Hart finley@example.test $99.00 Trial
Noah West noah@example.test −$15.00 Refunded
Parker Young parker@example.test — Trial

Selection and export

A header’s checkbox selects the page, and the checkbox in its column selects each row; author them hidden, as the script shows them. Your code handles data-plf-datatable-action buttons, such as Review selected, in a plf:datatable:action listener.

Invoices
Select rows Invoice Customer Amount
INV-001 Avery Stone $0.50
INV-002 Blair Chen $137.50
INV-003 Casey Rivera $274.50
INV-004 Devon Patel $411.50
INV-005 Elliot Brooks $548.50
INV-006 Finley Hart $685.50

Sticky header and column

Projects
Project Description
Customer guide A long project description stays readable and wraps inside its cell while the table scrolls.
Customer onboarding https://example.test/projects/customer-onboarding-with-a-very-long-unbroken-identifier-and-shared-review-resources
Partner portal The first column stays in view when you scroll sideways.

Empty

With an empty body, author the data-plf-datatable-empty message without hidden, so it shows before and after the script runs.

No contacts yet
Name
Your contact list is empty.

Density

Customer list
Customer Email Status Revenue Joined
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05
Finley Hart finley.hart@example.test Paused $685.50 2026-06-06

Multi-column sort

Shift+click or Shift+Enter on a sort button adds its column to the sort, and datatable-sort-rank shows its place.

Customer revenue
Customer Email Status Revenue Joined
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05
Finley Hart finley.hart@example.test Paused $685.50 2026-06-06

Column settings

Each data-plf-width must fall within its range input’s min and max.

Customer directory
Customer Email Status Revenue Joined
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05
Finley Hart finley.hart@example.test Paused $685.50 2026-06-06

Filters

Range inputs need their column’s type: number inputs for a number column, date inputs for a date column.

Customer accounts
Customer Email Status Revenue Joined
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05
Finley Hart finley.hart@example.test Paused $685.50 2026-06-06

Saved views

Mark the views controls and the table runs them: choosing a view applies it, Save or Enter saves the search, filters, sorting, page size, columns and density under the name, and Update and Delete act on the chosen view, which shows (modified) once the table changes. data-plf-storage-key keeps the views on this device.

Customer segments
Customer Email Status Revenue Joined
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05
Finley Hart finley.hart@example.test Paused $685.50 2026-06-06

Row actions

Your action code reads the row’s texts by column key with getRowData(row).

Customer contacts
Customer Email Status Revenue Joined Actions
Avery Stone avery.stone@example.test Customer $0.50 2026-01-01
Blair Chen blair.chen@example.test Trial $137.50 2026-02-02
Casey Rivera casey.rivera@example.test Paused $274.50 2026-03-03
Devon Patel devon.patel@example.test Customer $411.50 2026-04-04
Elliot Brooks elliot.brooks@example.test Trial $548.50 2026-05-05

Customer details

JavaScript

DataTable needs JavaScript and is an extension: the Full script and Full CSS leave it out. The Full script (pelatform-ui.min.js) and the extension scripts after it start every component on page load, with no code of your own; with Core and single files, the last line starts them. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="extensions/datatable.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/datatable.min.js" defer></script>
<script src="extensions/datatable-excel.min.js" defer></script>
<script src="extensions/datatable-pdf.min.js" defer></script>
<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="extensions/datatable.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/datatable.min.js" defer></script>
<script src="extensions/datatable-excel.min.js" defer></script>
<script src="extensions/datatable-pdf.min.js" defer></script>

Rows are read once, so after changing them call PLF.destroy(container), then PLF.init(container).

With ESM imports:

  1. Import DataTable from @pelatform/ui/extensions/datatable.
  2. Register excelAdapter or pdfAdapter with DataTable.registerExportAdapter(); Extensions lists the adapters’ vendors.
  3. Call use(DataTable) before init().

Hooks

Attribute Purpose
data-plf-datatable The datatable container
data-plf-datatable-controls Toolbars and footers, authored hidden; the search field and the paging buttons go inside
data-plf-datatable-filter Optional; marks the search field among several search inputs. Without it, the one labeled <input type="search"> is the search field, which is required
data-plf-datatable-empty The message shown when no rows match, outside the table
data-plf-datatable-status Optional; without it, the role="status" element that holds the counters is the status
data-plf-datatable-count A text slot: matched in the status is required; total, page, pages, from, to and selected are optional
data-plf-datatable-previous, data-plf-datatable-next Required paging buttons; data-plf-datatable-first and data-plf-datatable-last are optional. Each draws its chevron
data-plf-datatable-page-input Optional; without it, the number input among the paging buttons types a page. The script adds its instructions unless it has aria-describedby
data-plf-page-help On the container, the page input’s instructions; Type a page number, then press Enter or move focus away. Escape cancels the edit. by default
data-plf-datatable-pages An optional container for numbered page buttons, cloned from one button in a <template data-plf-datatable-page-template>; data-plf-page-label names them, Page {page} by default
data-plf-page-size On the container, rows per page; 10 by default
data-plf-datatable-page-size-control An optional <select> of page sizes that includes the starting one
data-plf-column Each header’s unique key
data-plf-type text (default), number or date
data-plf-value On a number or date cell, the value to sort and filter by, such as 1200.5 or 2026-01-31
data-plf-searchable Includes the column in search
data-plf-datatable-sortable On a header, the script adds a sort button around the header’s content, which names the column
data-plf-sort-label On the container, the sort buttons’ name; Sort by {label} by default, {label} being the header’s text
data-plf-multi-sort On the container, Shift adds a column to the sort, and each sort button shows its place
aria-sort ascending or descending on one sortable header for the starting sort
data-plf-datatable-column-filter A text input or <select> that filters the column with that key
data-plf-datatable-filter-min, data-plf-datatable-filter-max Number or date inputs for a range on that column, inclusive
data-plf-datatable-clear-filters A button that clears search and every filter
data-plf-datatable-select-row, data-plf-datatable-select-all Optional; without them, the checkbox in a header selects the page and the checkbox in its column selects each row. Author them hidden: the script shows them
data-plf-selection-scope On the container, page (default) or filtered for the header checkbox
data-plf-datatable-row-controls Menus and other controls in rows, authored hidden
data-plf-row An optional unique row key for state and exports; the row id otherwise
data-plf-datatable-bulk A bar shown while rows are selected
data-plf-datatable-select-filtered, data-plf-datatable-clear-selection Buttons that select every matching row or clear the selection
data-plf-datatable-action A button that fires plf:datatable:action for its row, or for the selected rows outside the body
data-plf-datatable-export-format A button: csv, copy, print, and xlsx or pdf with their adapter
data-plf-datatable-export-scope Optional; without it, the <select> whose options are filtered (default), all and selected
data-plf-no-export On a header, leaves the column out of exports
data-plf-export-text On a cell, the text to export instead of its content
data-plf-datatable-column-toggle A checkbox that shows or hides the column with that key
data-plf-required, data-plf-fixed On a header, the column cannot be hidden, or cannot move
data-plf-width A header’s starting width in pixels, from 24 to 2000 and within its width control’s min and max
data-plf-datatable-column-width A range input that sets the column width
data-plf-datatable-move-column, data-plf-datatable-move A button that moves the column by -1 or 1
data-plf-density On the container, comfortable (default) or compact
data-plf-datatable-density-control Optional; without it, the <select> with the comfortable and compact options
data-plf-sticky On the container, header, column or both: keeps the header row, the first visible column or both in view while the table scrolls
data-plf-storage-key Keeps the view and saved views in localStorage under this key
data-plf-datatable-views A <select> holding one option, with an empty value, for the current view: the script lists the saved views after it, and choosing one applies it
data-plf-datatable-view-name, data-plf-datatable-view-save A name field and its button: Save, or Enter in the field, saves the current view under the name
data-plf-datatable-view-update, data-plf-datatable-view-delete Buttons that save over or delete the view chosen in the select; disabled while none is chosen
data-plf-datatable-views-status An <output> or role="status" element for the views’ messages
data-plf-view-saved, data-plf-view-deleted, data-plf-view-applied On the container, the messages, {name} being the view’s name; Saved '{name}'., Deleted '{name}'. and Applied '{name}'. by default
data-plf-view-taken, data-plf-view-invalid On the container, the messages for a name already saved and an empty or long one; That name is already saved. Choose another, or update the chosen view. and Enter a view name of 1–80 characters. by default
data-plf-view-modified On the container, the chosen view’s option once the table changes; {name} (modified) by default
data-plf-datatable-reset A button that restores the starting view and selection

The script adds data-plf-datatable-selected to selected rows and data-plf-datatable-sort-direction to sorted headers.

Methods

Method Behavior
PLF.DataTable.getOrCreateInstance(container, options) Returns the instance, creating it; options takes pageSize, multiSort, density, storageKey and export (title, filename, fontBytes)
PLF.DataTable.getInstance(container) Returns the instance or null
PLF.DataTable.registerExportAdapter(format, adapter) Adds a download format; adapter.create(data, settings) returns {bytes, mimeType, extension}
instance.getState() Returns a copy of the sorts, query, filters, page, counts, selection, columns and density
instance.setSort(key, direction, {additive}), setSorts(sorts) Sorts one column asc, desc or null, adds it to a multi-sort, or replaces every sort with [{column, direction}]
instance.setFilter(text), setColumnFilter(key, {query, match, min, max}), clearFilters() Searches, filters one column (match is contains or exact), or clears every filter
instance.setPage(page), setPageSize(size) Goes to a page, counted from 1, or changes the rows per page
instance.setSelected(row, selected), selectRows(rows), selectPage(), selectFiltered(), clearSelection() Selects rows; pass false to the first four to deselect
instance.getSelectedRows() Returns the selected <tr> rows in sorted order
instance.getRowData(row) Returns a row’s texts by column key, as exports read them, such as {name: 'Avery Stone'}
instance.getActiveFilters() Returns the active column filters as {key, label, text, min, max}, in column order
instance.setColumnVisible(key, visible), setColumnOrder(keys), setColumnWidth(key, pixels) Changes the columns; a null width clears it
instance.setDensity(density) Sets comfortable or compact
instance.saveView(name, {overwrite}), applyView(name), deleteView(name), getViews() Keeps named views of the sorts, filters, page size, columns and density
instance.reset() Restores the starting view and selection
instance.runAction(name, row) Fires plf:datatable:action for a row, or for the selected rows without one
instance.getExportData(settings), exportData(format, settings) Returns the rows to export, or downloads, copies or prints them; settings takes scope, visibleColumns, title and filename
instance.destroy() Removes listeners and restores the original row order

Methods return false when a change is invalid, canceled or changes nothing.

Events

Event When
plf:datatable:before-change Before a sort, filter, page, selection, column, density or view change; cancelable
plf:datatable:change After the change
plf:datatable:before-action, plf:datatable:action Before and after an action request; the first is cancelable
plf:datatable:before-export Before an export; cancelable
plf:datatable:export-start, plf:datatable:export, plf:datatable:export-error An export starts, succeeds or fails
plf:datatable:export-end Every started export ends, with result success, error or aborted
plf:datatable:before-views-change, plf:datatable:views-change Before and after a saved view is saved or deleted; the first is cancelable

Each event’s detail:

Property Events Value
instance All The DataTable instance
trigger All The control used, or null from a method or a saved-view control
reason All trigger when trigger is set, otherwise api
previousState before-change, change The state before the change, shaped like getState()
state before-change, change The state after the change
action before-action, action The action’s name
row before-action, action The action’s row, or null for the selected rows
rows before-action, action The rows it covers
state before-action, action The current state
format before-export, export-start, export, export-error, export-end csv, copy, print, or an adapter’s format, such as xlsx or pdf
data before-export, export-start, export, export-error, export-end The rows and columns it takes, as getExportData() returns them
state before-export, export-start, export, export-error, export-end The state when the export started
error export-error The error that made it fail
action before-views-change, views-change save or delete
name before-views-change, views-change The view’s name
previousViews before-views-change, views-change The saved views before, as getViews() returns them
views before-views-change, views-change The saved views after
persisted views-change Whether localStorage kept the views

Keyboard

Key Action
Enter, Space On a sort button, sorts ascending, then descending, then unsorted
Shift+Enter, Shift+Space With data-plf-multi-sort, adds the column to the sort, as Shift+click does
Enter In the page input, goes to the typed page
Escape In the page input, restores the current page

CSS variables

Variable Default
--plf-datatable-gap --plf-space-4, 1rem (16px), between the toolbar, table and footer
--plf-datatable-filter-max-width 24rem (384px), for the search field
--plf-datatable-page-input-width At least 2.5rem (40px), growing with the page count
--plf-datatable-icon-size --plf-space-4, 1rem (16px), the sort icon
--plf-datatable-status-color --plf-color-text-muted, for the status and empty message
--plf-datatable-max-height 32rem (512px), the scroll height with a sticky header
--plf-datatable-selected-bg --plf-color-primary-subtle, on selected rows and the bulk bar
--plf-datatable-pinned-shadow A 1px --plf-color-border-subtle line beside a sticky column

Built with Pelatform UIv0.1.0

Components

Getting started

Foundations

Components

Actions

Data display

Navigation

Feedback

Data input

Layout

Advanced

Integrations

Blocks

Application

Authentication

Icons