Command Palette

Search for a command to run...

Docs
Flexi Filter Table

Flexi Filter Table

A flexible table component with multiple filter options including search, status, location, balance range, and date filtering.

Loading...

Installation

Usage

import FlexiFilterTable from "@/components/ui/flexi-filter-table";
 
const data = [
  {
    id: 1,
    name: "Alex Thompson",
    email: "alex.t@company.com",
    location: "San Francisco",
    status: "Active",
    balance: 1250,
    joined: new Date(2023, 3, 10),
  },
  // ... more data
];
 
const statuses = ["Active", "Inactive"];
const locations = ["San Francisco", "Singapore", "London"];
 
export default function MyFlexiTable() {
  return (
    <FlexiFilterTable
      data={data}
      statuses={statuses}
      locations={locations}
      title="Employee Management"
    />
  );
}

Props

PropTypeDefaultDescription
dataDataItem[]defaultDataArray of data objects to display
statusesstring[]defaultStatusesAvailable status options for filtering
locationsstring[]defaultLocationsAvailable location options for filtering
titlestring"Flexi Filter Table"Table title displayed at the top

Data Item Type

PropertyTypeDescription
idnumberUnique identifier
namestringPerson's full name
emailstringEmail address
locationstringGeographic location
statusstringCurrent status (Active/Inactive)
balancenumberAccount balance (can be negative)
joinedDateDate when person joined

Features

  • Multi-Row Selection: Select multiple rows with checkboxes
  • Text Search: Search across name and email fields
  • Status Filtering: Filter by status dropdown
  • Location Filtering: Filter by location dropdown
  • Balance Range: Filter by minimum and maximum balance
  • Date Filtering: Filter by join date (joined after specific date)
  • Combined Filtering: All filters work together simultaneously
  • Selection Summary: Shows count of selected items
  • Responsive Layout: Filters stack on mobile devices
  • Real-time Updates: Filters apply immediately as you type/select