Lit Example: Filters
ts
import { customElement, property, state } from 'lit/decorators.js'
import { html, LitElement } from 'lit'
import { repeat } from 'lit/directives/repeat.js'
import {
Column,
ColumnDef,
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
RowData,
TableController,
} from '@tanstack/lit-table'
import { makeData, Person } from './makeData'
const columns: ColumnDef<Person, any>[] = [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => html`<span>Last Name</span>`,
},
{
accessorFn: row => `${row.firstName} ${row.lastName}`,
id: 'fullName',
header: 'Full Name',
cell: info => info.getValue(),
},
{
accessorKey: 'age',
header: () => 'Age',
meta: {
filterVariant: 'range',
},
},
{
accessorKey: 'visits',
header: () => html`<span>Visits</span>`,
meta: {
filterVariant: 'range',
},
},
{
accessorKey: 'status',
header: 'Status',
meta: {
filterVariant: 'select',
},
},
{
accessorKey: 'progress',
header: 'Profile Progress',
meta: {
filterVariant: 'range',
},
},
]
declare module '@tanstack/lit-table' {
//allows us to define custom properties for our columns
interface ColumnMeta<TData extends RowData, TValue> {
filterVariant?: 'text' | 'range' | 'select'
}
}
const data = makeData(50_000)
@customElement('column-filter')
class ColumnFilter extends LitElement {
@property()
private column!: Column<any, {}>
private onChange(evt: InputEvent) {
this.column?.setFilterValue((evt.target as HTMLInputElement).value)
}
render() {
const { filterVariant } = this.column.columnDef.meta ?? {}
const columnFilterValue = this.column.getFilterValue()
switch (filterVariant) {
case 'select':
return html` <select
@change=${(e: Event) =>
this.column.setFilterValue((e.target as HTMLSelectElement).value)}
>
<option value="">All</option>
<option value="complicated">complicated</option>
<option value="relationship">relationship</option>
<option value="single">single</option>
</select>`
case 'range':
return html`
<div style="display:flex;gap:2px">
<input
type="number"
placeholder="Min"
@change="${(e: Event) =>
this.column.setFilterValue((old: [number, number]) => [
parseInt((e.target as HTMLInputElement).value, 10),
old?.[1],
])}"
value=${(columnFilterValue as [number, number])?.[0] ?? ''}
/>
<input
type="number"
placeholder="Max"
@change="${(e: Event) =>
this.column.setFilterValue((old: [number, number]) => [
parseInt((e.target as HTMLInputElement).value, 10),
old?.[0],
])}"
value=${(columnFilterValue as [number, number])?.[1] ?? ''}
/>
</div>
`
default:
return html`<input @input=${this.onChange} />`
}
return null
}
}
@customElement('lit-table-example')
class LitTableExample extends LitElement {
private tableController = new TableController<Person>(this)
@state()
private _columnFilters: ColumnFiltersState = []
protected render(): unknown {
const table = this.tableController.table({
data,
columns,
filterFns: {},
state: {
columnFilters: this._columnFilters,
},
onColumnFiltersChange: updater => {
if (typeof updater === 'function') {
this._columnFilters = updater(this._columnFilters)
} else {
this._columnFilters = updater
}
},
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(), //client side filtering
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: false,
})
return html`
<table>
<thead>
${repeat(
table.getHeaderGroups(),
headerGroup => headerGroup.id,
headerGroup => html`
<tr>
${repeat(
headerGroup.headers,
header => header.id,
header => html`
<th colspan="${header.colSpan}">
${header.isPlaceholder
? null
: html`<div
title=${header.column.getCanSort()
? header.column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: header.column.getNextSortingOrder() ===
'desc'
? 'Sort descending'
: 'Clear sort'
: undefined}
@click="${header.column.getToggleSortingHandler()}"
style="cursor: ${header.column.getCanSort()
? 'pointer'
: 'not-allowed'}"
>
${flexRender(
header.column.columnDef.header,
header.getContext()
)}
${{ asc: ' 🔼', desc: ' 🔽' }[
header.column.getIsSorted() as string
] ?? null}
</div>
${header.column.getCanFilter()
? html` <div>
<column-filter
.column="${header.column}"
></column-filter>
</div>`
: null} `}
</th>
`
)}
</tr>
`
)}
</thead>
<tbody>
${table
.getRowModel()
.rows.slice(0, 10)
.map(
row => html`
<tr>
${row
.getVisibleCells()
.map(
cell => html`
<td>
${flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
`
)}
</tr>
`
)}
</tbody>
</table>
<div class="page-controls">
<button
@click=${() => table.setPageIndex(0)}
?disabled="${!table.getCanPreviousPage()}"
>
<<
</button>
<button
@click=${() => table.previousPage()}
?disabled=${!table.getCanPreviousPage()}
>
<
</button>
<button
@click=${() => table.nextPage()}
?disabled=${!table.getCanNextPage()}
>
>
</button>
<button
@click=${() => table.setPageIndex(table.getPageCount() - 1)}
?disabled="${!table.getCanNextPage()}"
>
>>
</button>
<span style="display: flex;gap:2px">
<span>Page</span>
<strong>
${table.getState().pagination.pageIndex + 1} of
${table.getPageCount()}
</strong>
</span>
</div>
<pre>${JSON.stringify(this._columnFilters, null, 2)}</pre>
<style>
* {
font-family: sans-serif;
font-size: 14px;
box-sizing: border-box;
}
table {
border: 1px solid lightgray;
border-collapse: collapse;
}
tbody {
border-bottom: 1px solid lightgray;
}
th {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
.page-controls {
display: flex;
gap: 10px;
padding: 4px 0;
}
</style>
`
}
}
import { customElement, property, state } from 'lit/decorators.js'
import { html, LitElement } from 'lit'
import { repeat } from 'lit/directives/repeat.js'
import {
Column,
ColumnDef,
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
RowData,
TableController,
} from '@tanstack/lit-table'
import { makeData, Person } from './makeData'
const columns: ColumnDef<Person, any>[] = [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => html`<span>Last Name</span>`,
},
{
accessorFn: row => `${row.firstName} ${row.lastName}`,
id: 'fullName',
header: 'Full Name',
cell: info => info.getValue(),
},
{
accessorKey: 'age',
header: () => 'Age',
meta: {
filterVariant: 'range',
},
},
{
accessorKey: 'visits',
header: () => html`<span>Visits</span>`,
meta: {
filterVariant: 'range',
},
},
{
accessorKey: 'status',
header: 'Status',
meta: {
filterVariant: 'select',
},
},
{
accessorKey: 'progress',
header: 'Profile Progress',
meta: {
filterVariant: 'range',
},
},
]
declare module '@tanstack/lit-table' {
//allows us to define custom properties for our columns
interface ColumnMeta<TData extends RowData, TValue> {
filterVariant?: 'text' | 'range' | 'select'
}
}
const data = makeData(50_000)
@customElement('column-filter')
class ColumnFilter extends LitElement {
@property()
private column!: Column<any, {}>
private onChange(evt: InputEvent) {
this.column?.setFilterValue((evt.target as HTMLInputElement).value)
}
render() {
const { filterVariant } = this.column.columnDef.meta ?? {}
const columnFilterValue = this.column.getFilterValue()
switch (filterVariant) {
case 'select':
return html` <select
@change=${(e: Event) =>
this.column.setFilterValue((e.target as HTMLSelectElement).value)}
>
<option value="">All</option>
<option value="complicated">complicated</option>
<option value="relationship">relationship</option>
<option value="single">single</option>
</select>`
case 'range':
return html`
<div style="display:flex;gap:2px">
<input
type="number"
placeholder="Min"
@change="${(e: Event) =>
this.column.setFilterValue((old: [number, number]) => [
parseInt((e.target as HTMLInputElement).value, 10),
old?.[1],
])}"
value=${(columnFilterValue as [number, number])?.[0] ?? ''}
/>
<input
type="number"
placeholder="Max"
@change="${(e: Event) =>
this.column.setFilterValue((old: [number, number]) => [
parseInt((e.target as HTMLInputElement).value, 10),
old?.[0],
])}"
value=${(columnFilterValue as [number, number])?.[1] ?? ''}
/>
</div>
`
default:
return html`<input @input=${this.onChange} />`
}
return null
}
}
@customElement('lit-table-example')
class LitTableExample extends LitElement {
private tableController = new TableController<Person>(this)
@state()
private _columnFilters: ColumnFiltersState = []
protected render(): unknown {
const table = this.tableController.table({
data,
columns,
filterFns: {},
state: {
columnFilters: this._columnFilters,
},
onColumnFiltersChange: updater => {
if (typeof updater === 'function') {
this._columnFilters = updater(this._columnFilters)
} else {
this._columnFilters = updater
}
},
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(), //client side filtering
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: false,
})
return html`
<table>
<thead>
${repeat(
table.getHeaderGroups(),
headerGroup => headerGroup.id,
headerGroup => html`
<tr>
${repeat(
headerGroup.headers,
header => header.id,
header => html`
<th colspan="${header.colSpan}">
${header.isPlaceholder
? null
: html`<div
title=${header.column.getCanSort()
? header.column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: header.column.getNextSortingOrder() ===
'desc'
? 'Sort descending'
: 'Clear sort'
: undefined}
@click="${header.column.getToggleSortingHandler()}"
style="cursor: ${header.column.getCanSort()
? 'pointer'
: 'not-allowed'}"
>
${flexRender(
header.column.columnDef.header,
header.getContext()
)}
${{ asc: ' 🔼', desc: ' 🔽' }[
header.column.getIsSorted() as string
] ?? null}
</div>
${header.column.getCanFilter()
? html` <div>
<column-filter
.column="${header.column}"
></column-filter>
</div>`
: null} `}
</th>
`
)}
</tr>
`
)}
</thead>
<tbody>
${table
.getRowModel()
.rows.slice(0, 10)
.map(
row => html`
<tr>
${row
.getVisibleCells()
.map(
cell => html`
<td>
${flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
`
)}
</tr>
`
)}
</tbody>
</table>
<div class="page-controls">
<button
@click=${() => table.setPageIndex(0)}
?disabled="${!table.getCanPreviousPage()}"
>
<<
</button>
<button
@click=${() => table.previousPage()}
?disabled=${!table.getCanPreviousPage()}
>
<
</button>
<button
@click=${() => table.nextPage()}
?disabled=${!table.getCanNextPage()}
>
>
</button>
<button
@click=${() => table.setPageIndex(table.getPageCount() - 1)}
?disabled="${!table.getCanNextPage()}"
>
>>
</button>
<span style="display: flex;gap:2px">
<span>Page</span>
<strong>
${table.getState().pagination.pageIndex + 1} of
${table.getPageCount()}
</strong>
</span>
</div>
<pre>${JSON.stringify(this._columnFilters, null, 2)}</pre>
<style>
* {
font-family: sans-serif;
font-size: 14px;
box-sizing: border-box;
}
table {
border: 1px solid lightgray;
border-collapse: collapse;
}
tbody {
border-bottom: 1px solid lightgray;
}
th {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
.page-controls {
display: flex;
gap: 10px;
padding: 4px 0;
}
</style>
`
}
}
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23031c4c'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23031c4c'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23fff'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23fff'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.