Method render

examples/lit/filters/src/main.ts:83–127

()

  }

  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')