FieldSelector
Implemented DataSearchable column selector with ordering, required fields, optional persistence and table integration.
A wdj composition built from the existing component library.
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Configurable table
Search, add, remove and reorder fields, then apply them to a table with expandable details.
Choose columns or expand a resource to see its details.
| Details | Resource | Status | Region | Requests |
|---|---|---|---|---|
| Edge API | Active | eu-west-1 | 24,810 | |
Edge API details
|
||||
| Documentation | Paused | us-east-1 | 8,402 | |
Documentation details
|
||||
Show template
{% load wdj %}
<div class="flex w-full min-w-0 flex-col gap-4">
<div class="flex flex-wrap items-center justify-between gap-3">
<p class="text-base text-kumo-subtle">Choose columns or expand a resource to see its details.</p>
{% include "wdj/components/field_selector.html" with id="example-fields" fields=display_fields table_id="example-fields-table" only %}
</div>
{% include "wdj/components/table.html" with id="example-fields-table" columns=display_columns rows=display_rows expandable=True caption="Configurable resources" only %}
</div>Form integration
Ordered JSON values, required columns, draft cancellation and native form reset.
Show template
{% load wdj %}
<form class="flex w-full flex-col gap-4" x-data="{ submitted: '' }" @submit.prevent="submitted = new FormData($el).get('columns')" @reset="submitted = ''">
<p class="text-base text-kumo-subtle">The selected keys are submitted in display order. Cancel leaves the submitted value unchanged.</p>
<div class="flex flex-wrap items-center gap-3">
{% include "wdj/components/field_selector.html" with id="form-fields" fields=display_fields value=display_initial only %}
{% include "wdj/components/button.html" with label="Submit selection" type="submit" variant="primary" only %}
{% include "wdj/components/button.html" with label="Reset form" type="reset" only %}
</div>
<output x-text="submitted || 'No selection submitted yet.'" class="break-words text-base text-kumo-subtle" aria-live="polite"></output>
</form>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | list[dict] | unset | List of {key, label, description?, required?, selected?}. Required fields cannot be removed; at least one field remains selected. |
| value | list[string] | Fields with selected != False | Initially selected field keys, in order. Unknown keys and duplicates are removed; required fields are restored. |
| name | string | columns | Hidden input containing an ordered JSON array, updated on Apply. Native reset restores the initial configuration. |
| table_id | string | unset | Optional ID of a wdj Table wrapper. Apply changes its visible columns and order, including after HTMX swaps. |
| persist_key | string | unset | Optional localStorage key for display preferences. Scope it to the current account and table; omit for no persistence. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| label | string | Fields | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| disabled | bool | False | Disable the trigger and omit the value from native form submission. |
| class | string | "" | Class; pass the documented value shown in the examples. |