LiveTable.Range (live_table v0.2.0)

View Source

A module for handling range-based filters in LiveTable.

This module provides functionality for creating and managing range filters that can handle numeric values, dates, and datetimes. It supports creating range sliders with customizable options and appearances.

Makes use of nouislider under the hood for creating the range slider. See the noUiSlider documentation for more details on customizing the slider behavior and appearance.

Note: Requires the TableHooks to be imported in your app.js

Options

The module accepts the following options:

  • :type - The type of range filter (:number, :date, or :datetime)
  • :label - The label text for the range filter
  • :unit - The unit to display after the label (optional)
  • :css_classes - CSS classes for the main container
  • :slider_classes - CSS classes for the slider element
  • :label_classes - CSS classes for the label element

For default values, see: LiveTable.Range source code

Types Support

The module supports three types of range filters:

  • :number - For numeric ranges
  • :date - For date ranges
  • :datetime - For datetime ranges

:number

For numeric ranges with configurable min, max and step values:

Range.new(:price, "price_range", %{
  type: :number,
  label: "Price",
  default_min: 0,
  default_max: 1000,
  step: 10
})
# Renders a range filter with from 0 to 1000 with a step of 10.

:date

For date ranges with customizable date boundaries:

Range.new(:created_at, "date_range", %{
  type: :date,
  label: "Creation Date",
  default_min: ~D[2024-01-01],
  default_max: ~D[2024-12-31]
})
# Renders a date range filter with dates from 2024-01-01 to 2024-12-31.

:datetime

For datetime ranges with configurable datetime boundaries:

Range.new(:updated_at, "datetime_range", %{
  type: :datetime,
  label: "Last Updated",
  default_min: ~N[2024-01-01 00:00:00],
  default_max: ~N[2024-12-31 23:59:59],
  step: 3600 # Step in seconds
})
# Renders a datetime range filter with dates from 2024-01-01 00:00:00 to 2024-12-31 23:59:59.
# Remember to pass the datetime values in `NaiveDateTime` format.

Examples 

# Creating a numeric range filter
Range.new(:price, "price_range", %{
  type: :number,
  label: "Price Range",
  unit: "$",
  min: 0,
  max: 1000,
  step: 10
})

# Creating a date range filter
Range.new(:created_at, "date_range", %{
  type: :date,
  label: "Date Range",
  min: ~D[2024-01-01],
  max: ~D[2024-12-31]
})

If you want to use the range filter with a joined schema, you can pass the field as a tuple, with the table name and the field-

Range.new({:suppliers, :created_at}, "created_at", %{
  type: :date,
  label: "Supplier Creation",
  min: ~D[2024-01-01],
  max: ~D[2024-12-31],
})

TODO:

  • [ ] Set slider value based on URL params
  • [ ] Format the slider appearance. Apply classes at Preline UI
  • [ ] Add support for customizing the range slider appearance(The slider classes should apply to the slider element)