- 1.5.0

Table Front

Renders a toolbar above a table with search, actions, filter presets and record counts.

Read more Read less

The first row contains the search form and any actions supplied through the default slot, aligned to the right. The second row places filter navigation on the left and record counts on the right, in a shared horizontal flex container. Filter tabs scroll horizontally when space is limited. This row is omitted when neither filters nor a count are provided.

Search and additional fields

Search is enabled by default. The input is named query, uses a 200 ms debounce, and the form sends the "search" event on both change and submit. Use search_input_value to reflect the current query and search_input_placeholder to customize its placeholder.

Add fields to the same form with <:form :let={f}>, which receives the form. Setting search={false} hides only the search input; additional form fields and actions remain available. When id is supplied, the form ID is "<id>_search_form".

Filter presets

Supply one <:filters> slot per preset, with the tab label as its content. Each preset accepts sorting, filters, color and an optional count. Omitted sorting and filters default to []; the default color is :default. The navigation has a rounded outer border. Inactive tabs use their configured text color; the active tab has a rounded background in its configured color. Counts appear beside the labels.

With presets, patch must be a two-argument function receiving the preset's sorting and filters and returning a URL. Links perform a LiveView patch; the parent handles the URL parameters and updates the table. The callback is also responsible for preserving any query parameters that should survive, such as search.

A preset is active when both its sorting and filters match current_sorting and current_filters. Atoms and strings are treated equivalently. Sorting order matters; filter column order and option order do not, and empty option lists are ignored. Clicking an active preset reapplies it. A preset with no sorting or filters calls patch.([], []) and can serve as a reset button.

Counts

count displays the total beside count_label, which defaults to "enregistrement". The label is used as supplied for one record, with "s" appended otherwise. When selected_count is provided, the display becomes selected_count / count. A count of zero is displayed; false or nil hides the counter. selected_count is only shown when count is visible. Use count_class to extend its styling.

Each preset's optional count appears in parentheses; zero is displayed and nil hides it. The caller computes all counts, including preset totals before pagination that respect the current search and the preset's filters.

Attribute Type Documentation Default Value
id :string

Table front ID
class :string

Extends the table front class
count_class :string

Extends the counter class
search :boolean

Is search bar enabled?
true
search_input_placeholder :string

Placeholder text for the search input field
search_input_value :string

Search input value
search_input_icon_wrapper_class :string

Extend classes for search input
search_form_class :string

Extend classes for search form
search_form_grid :boolean

Remove the grid layout of the form
search_input_phx-debounce :integer

Debounce for the search input
200
search_input_icon :string

FontAwesome icon class for the search input field
"fas fa-search"
count :any

Shows the number of records of the table below
false
selected_count :any

Shows the number of selected records of the table below
false
count_label :string

Label used next to the record count. Will be pluralized.
"enregistrement"
current_sorting :list []
current_filters :list []
patch :any

Required with filters. Function receiving sorting and filters and returning a patch URL
filters :slot

Table presets rendered as patch links
Show slot attributes Hide slot attributes
sorting :list

Preset sorting; defaults to []
filters :list

Preset column filters; defaults to []
color :atom
count :any

Optional integer total before pagination; nil hides the count
form :slot

Additionnal form to the table front

 
<:form :let={f}>
  <.select_input_group
    form={f}
    id="it-is-required-for-select-hook"
    group_class="mb-0 md:col-span-2 !md:col-span-*"
    name="gender"
    options={["", "Female", "Male"]}
    placeholder="Select a gender"
  />
</:form>
inner_block :slot

Buttons section, will displayed with a row flex layout right aligned