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>
`
}
}
Our Partners
'%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.
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.