React Searchable List

A beautiful and feature-rich searchable list component for React applications, with built-in support for filtering, sorting, and item actions.

Features

• 🔍 Real-time search functionality
• 🔀 Advanced filtering with multiple conditions
• ↕️ Drag-and-drop sorting with multiple criteria
• 🎨 Beautiful UI with Tailwind CSS
• 📱 Fully responsive design
• ⚡ Optimized performance
• 🎯 TypeScript support
• 🛠️ Customizable actions (edit/delete)

Installation

npm install jm-searchable-list

Required Dependencies

This package has the following peer dependencies:

npm install lucide-react

Usage

1. Import the component and its styles:

import { SearchableList } from 'jm-searchable-list';
import 'jm-searchable-list/dist/style.css';

2. Use the component in your React application:

function App() {
  const data = {
    items: [
      {
        Id: 1,
        content: {
          image: "https://example.com/image.jpg",
          name: "John Doe",
          description: "Software Engineer",
          department: "Engineering",
          status: "Active",
          yearsOfService: 5
        }
      }
    ]
  };

  const settings = {
    displayEdit: true,
    displayDelete: true,
    fullCardEdit: true
  };

  const handleEdit = (id: number) => {
    console.log('Edit clicked for item:', id);
  };

  const handleDelete = (id: number) => {
    console.log('Delete clicked for item:', id);
  };

  return (
    <SearchableList 
      data={data.items}
      settings={settings}
      onSearch={(term) => console.log('Searching:', term)}
      onEdit={handleEdit}
      onDelete={handleDelete}
    />
  );
}

Data Structure

ListItem Interface

Each item in the list must follow this structure:

interface ListItem {
  Id: number;
  content: {
    image?: string;
    name?: string;
    description?: string;
    [key: string]: string | number | boolean | undefined;
  };
}

Settings Interface

Control the visibility of action buttons:

interface ListSettings {
  displayDelete: boolean;
  displayEdit: boolean;
  fullCardEdit: boolean;
}

Props

interface SearchableListProps {
  data: ListItem[];
  settings?: ListSettings;
  onSearch?: (searchTerm: string) => void;
  onEdit?: (id: number) => void;
  onDelete?: (id: number) => void;
}

Content Display

The component automatically organizes content in a responsive layout:

1. Primary Content (Left Side):

   • Image (if provided)
   • Name
   • Description

2. Additional Content (Right Side):

   • All other fields from the content object
   • Action buttons (if enabled)

Styling

The component uses Tailwind CSS for styling. The styles are included in the distributed CSS file. Make sure to import the CSS file in your application:

import 'jm-searchable-list/dist/style.css';

Features in Detail

Search

• Real-time search across all content fields
• Triggers onSearch callback with current search term

Filtering

• Filter by any content field
• Multiple filter conditions
• Various operators: contains, does not contain, greater than, less than, etc.
• Support for multiple values (IN/NOT IN operators)

Sorting

• Sort by multiple fields
• Drag and drop to reorder sort criteria
• Toggle ascending/descending order
• Preserve sort order across searches

License

MIT