netsi-table — playground

A dependency-free Custom Element that enhances a normal HTML table with three-state sorting, fuzzy filtering, sums, pagination, row/column hover and copy as CSV or Markdown.

Name	City	Age	Amount
Sten	Viborg	61	12450.50
Anita	Barcelona	21	8200
Lars	Aarhus	59	15100
María	Madrid	34	9750.25
Wei	Shanghai	42	18300
Lucía	Valencia	28	11120
Oliver	London	46	16750
Sofia	Sevilla	31	10300
Noah	Oslo	38	14250
Emma	Copenhagen	27	13300
Mateo	Málaga	53	20150
Freja	Odense	44	17680
Lucas	Lisbon	36	11990
Clara	Berlin	49	15840
Jonas	Aalborg	33	9050

Configuration playground

Change the options and see the table update immediately.

Features

Sorting

Filter

Sticky header

Sticky footer

Sum

Sum scope

Row hover

Column hover

Copy CSV

Copy Markdown

Filter text

Pagination

Enabled

Page size

Size options

Position

Page buttons

Row info

First / last

Size selector

Live preview

Name	City	Age	Amount
Sten	Viborg	61	12450.50
Anita	Barcelona	21	8200
Lars	Aarhus	59	15100
María	Madrid	34	9750.25
Wei	Shanghai	42	18300
Lucía	Valencia	28	11120
Oliver	London	46	16750
Sofia	Sevilla	31	10300
Noah	Oslo	38	14250
Emma	Copenhagen	27	13300
Mateo	Málaga	53	20150
Freja	Odense	44	17680
Lucas	Lisbon	36	11990
Clara	Berlin	49	15840
Jonas	Aalborg	33	9050

Attribute reference

Option	Effect
`sortable`	ASC → DESC → NONE with a live ↕ / ↑ / ↓ indicator.
`filter`	Instant fuzzy filtering.
`sum="none\|auto\|all"`	Controls generated numeric sums.
`sum-scope="page\|filtered"`	Sum the visible page or all rows matching the filter.
`pagination`	Enables pagination.
`page-size="10"`	Rows per page.
`page-size-options="5,10,25"`	Values offered by the page-size selector.
`pagination-position="top\|bottom\|both"`	Where pagination controls are rendered.
`pagination-window="5"`	Maximum number of numbered page buttons.
`pagination-info="true\|false"`	Shows or hides the row range.
`pagination-first-last="true\|false"`	Shows or hides first/last controls.
`pagination-page-size-select="true\|false"`	Shows or hides the page-size selector.
`copy-csv / copy-md`	Copies only the rows actually visible on the current page.
`lang="en\|da\|es\|ch"`	Component UI language. English is default.

<netsi-table
  sortable
  filter
  sticky-header
  sticky-footer
  sum="auto"
  sum-scope="page"
  hover-row
  hover-col
  copy-csv
  copy-md
  pagination
  page-size="10"
  page-size-options="5,10,25,50"
  pagination-position="bottom"
  pagination-info="true"
  pagination-first-last="true"
  pagination-page-size-select="true"
  pagination-window="5"
>
  <table>...</table>
</netsi-table>

About

netsi-table keeps the original table as semantic HTML and progressively enhances it without dependencies.

Copy CSV and Copy MD always use exactly the rows currently displayed. With pagination enabled that means the current page only. Filtering and pagination therefore both affect copied output.