A flexible search component for filtering table data with support for custom rendering and styling

Table Search 🔍

The TableSearch component provides a powerful and flexible way to filter your table data. It integrates seamlessly with the TableGrid system and supports both default and custom search implementations.

Features ✨

🔄 Integrated with TableGrid instance
🎨 Customizable styling (Tailwind/Custom CSS)
🎯 Custom search input components
⌛ Loading state support
❌ Error state handling
♿ Full accessibility support

Basic Usage

import { TableSearch } from '@shakibdshy/react-tablegrid';
 
function MyTable() {
  const tableInstance = useTableGrid({
    columns,
    data,
  });
 
  return (
    <TableSearch
      tableInstance={tableInstance}
      placeholder="Search table..."
    />
  );
}

Props

Required Props

`tableInstance`

The table instance from useTableGrid hook that manages the table state.

const tableInstance = useTableGrid<YourDataType>({
  columns,
  data,
});
 
<TableSearch tableInstance={tableInstance} />

Optional Props

`className`

Add custom CSS classes to the search container.

<TableSearch
  className="my-custom-search"
  tableInstance={tableInstance}
/>

`searchInputClassName`

Add custom CSS classes specifically to the search input.

<TableSearch
  searchInputClassName="my-custom-input"
  tableInstance={tableInstance}
/>

`style`

Add custom inline styles to the search container.

<TableSearch
  style={{ marginBottom: '2rem' }}
  tableInstance={tableInstance}
/>

`placeholder`

Customize the input placeholder text.

Type: string
Default: "Search..."

<TableSearch
  placeholder="Filter table content..."
  tableInstance={tableInstance}
/>

`isLoading`

Show loading state in the search input.

Type: boolean
Default: false

<TableSearch
  isLoading={true}
  tableInstance={tableInstance}
/>

`error`

Display error message below the search input.

Type: string

<TableSearch
  error="Failed to process search"
  tableInstance={tableInstance}
/>

`withoutTailwind`

Use without Tailwind CSS styling.

Type: boolean
Default: false

<TableSearch
  withoutTailwind={true}
  tableInstance={tableInstance}
/>

Customization

Custom Search Input

You can provide a custom search input component through the components prop:

<TableSearch
  tableInstance={tableInstance}
  components={{
    SearchInput: ({ value, onChange, placeholder }) => (
      <div className="relative">
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          className="pl-10 pr-4 py-2 border rounded-lg w-full"
        />
        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
      </div>
    ),
  }}
/>

Custom Render Function

For complete control over the search UI, use the customRender prop:

<TableSearch
  tableInstance={tableInstance}
  customRender={({ value, onChange, placeholder }) => (
    <div className="flex items-center gap-2">
      <SearchIcon className="text-gray-400" />
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="border-none focus:ring-0"
      />
      {value && (
        <button
          onClick={() => onChange('')}
          className="text-gray-400 hover:text-gray-600"
        >
          Clear
        </button>
      )}
    </div>
  )}
/>

Styling

With Tailwind (Default)

<TableSearch
  className="mb-4"
  searchInputClassName="w-full px-4 py-2 rounded-lg border focus:ring-2"
  tableInstance={tableInstance}
/>

Without Tailwind

<TableSearch
  withoutTailwind={true}
  className="rtg-search-container"
  searchInputClassName="rtg-search-input"
  tableInstance={tableInstance}
/>

Examples

Basic Search with Loading State

function SearchWithLoading() {
  const [isSearching, setIsSearching] = useState(false);
  const tableInstance = useTableGrid({
    columns,
    data,
  });
 
  return (
    <TableSearch
      tableInstance={tableInstance}
      isLoading={isSearching}
      placeholder="Search users..."
    />
  );
}

Search with Error Handling

function SearchWithError() {
  const [error, setError] = useState<string>();
  const tableInstance = useTableGrid({
    columns,
    data,
  });
 
  return (
    <TableSearch
      tableInstance={tableInstance}
      error={error}
      onFilterChange={(value) => {
        try {
          // Your search logic
        } catch (err) {
          setError('Invalid search query');
        }
      }}
    />
  );
}

Custom Search with Icons

function CustomSearchWithIcons() {
  const tableInstance = useTableGrid({
    columns,
    data,
  });
 
  return (
    <TableSearch
      tableInstance={tableInstance}
      components={{
        SearchInput: ({ value, onChange, placeholder }) => (
          <div className="relative">
            <input
              type="text"
              value={value}
              onChange={(e) => onChange(e.target.value)}
              placeholder={placeholder}
              className="pl-10 pr-12 py-2 border rounded-lg w-full"
            />
            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            {value && (
              <button
                onClick={() => onChange('')}
                className="absolute right-3 top-1/2 -translate-y-1/2"
                aria-label="Clear search"
              >
                ✕
              </button>
            )}
          </div>
        ),
      }}
    />
  );
}

Accessibility ♿

The TableSearch component implements these accessibility features:

Proper role="search" attribute
Descriptive ARIA labels
Screen reader support via aria-label and aria-describedby
Clear error announcements with role="alert"
Keyboard navigation support
Loading state indication

Best Practices 💡

Always provide a descriptive placeholder text
Handle loading and error states appropriately
Consider adding a clear button for non-empty searches
Use appropriate icons to indicate search functionality
Implement proper error handling
Keep accessibility in mind when customizing

Table Search 🔍

On this page