Basic Search Example

This example demonstrates how to implement basic search functionality in your table. You'll learn how to enable filtering and handle search state changes.

Overview

The basic search example shows how to:

• Enable table filtering
• Handle search state changes
• Use the classic variant styling
• Configure sortable columns

Example

Key Features Explained

1. Enabling Search

To enable search functionality, set the enableFiltering prop to true:

<TableGrid
  enableFiltering={true}
  // ... other props
/>

2. Column Configuration

Each column can be configured for sorting:

columnHelper.accessor("name", {
  header: "Name",
  sortable: true, // Enable sorting for this column
})

3. State Management

Track table state changes using the onStateChange prop:

onStateChange={(state) => {
  console.log("Table state changed:", state);
  // Access search value: state.filterValue
  // Access filtered data: state.data
}}

Props Used

Customization Options

1. Search Input Styling

You can customize the search input appearance using the styleConfig prop:

<TableGrid
  styleConfig={{
    utilityStyles: {
      searchContainer: "p-4 border-b",
    },
  }}
  // ... other props
/>

2. Search Placeholder

Customize the search placeholder text:

<TableGrid
  filterPlaceholder="Search items..."
  // ... other props
/>

Best Practices

1. Type Safety: Always define your data types and use createColumnHelper
2. State Management: Handle state changes appropriately for your use case
3. Error Handling: Add error boundaries and loading states
4. Accessibility: Ensure proper ARIA labels for the search input

Common Issues and Solutions

Search Not Working

If the search functionality isn't working:

1. Verify enableFiltering is set to true
2. Check that your data structure matches the column accessors
3. Ensure you're not overriding the filtered data accidentally

Performance Issues

If you experience performance issues with large datasets:

1. Consider implementing debounced search
2. Use virtualization for large data sets
3. Implement server-side filtering

Next Steps

• Try implementing Fuzzy Search