A responsive data grid with a numeric range slider that filters rows in real time (e.g., Calories). Users can quickly narrow results, select rows via checkboxes with a selection banner, and browse pages using footer pagination—ideal for data-heavy screens that need fast, visual filtering.

Functionality

• Top range slider (min/max) bound to a numeric column with live filtering

• Checkbox row selection + tri-state Select all and selection count banner

• Sortable headers (asc/desc) and optional per-column filters

• Footer pagination: rows-per-page selector, range label, next/prev

• Client or server-side filtering/paging; loading/empty/error states

Use cases

• Nutrition datasets filtering by calories, fat, carbs, etc.

• E-commerce catalogs narrowing by price or stock level

• CRM/lead lists filtered by score or activity count

• Analytics/logs constrained by duration, size, or latency

• Education/HR tables filtered by grade, hours, or pay band

Keywords
data table, data grid, range slider, numeric filter, live filtering, real-time filter, checkbox selection, select all, selection banner, sortable columns, pagination, rows per page, page size, range label, client side, server side, loading state, empty state, error state, responsive table, admin dashboard, analytics table, inventory list, CRM list, e-commerce grid, accessibility, ARIA grid, keyboard navigation, zebra rows, modern UI, Flutter widget, FlutterFlow component.