I'll create a comprehensive data table implementation using TanStack Table with shadcn UI components, similar to the one in your image but with all the requested features. Let's build this step by step.

This implementation includes all the features you requested:

1. Virtualized Infinite Scrolling: Using TanStack Virtual to efficiently render only the visible rows, with automatic loading of 20 more records as you scroll.
2. Row Selection: Checkbox-based row selection with a counter showing how many rows are selected.
3. Sorting: Click on column headers to sort in ascending or descending order.
4. Column Ordering: The table supports column reordering through the TanStack Table API.
5. Fuzzy Search Filtering: The global search input uses the TanStack match-sorter utility to provide fuzzy search across all columns.

6. Additional Features:

   • Column visibility toggle
   • Status badges with appropriate colors
   • Formatted currency amounts
   • Action menu for each row
   • Responsive design using shadcn UI components

The implementation generates 500 fake payment records using Faker.js with realistic data including IDs, amounts, statuses, emails, and dates.

To use this in your project, you'll need to install the following dependencies:

The data table follows the shadcn UI design system and uses their components for a consistent look and feel 12. The implementation is based on the shadcn data table pattern but enhanced with the virtualization and infinite scrolling features you requested.

Let's fix the error in the data-table-view-options.tsx file. The issue is that we're importing DropdownMenuTrigger directly from Radix UI instead of from our shadcn components.

The error occurred because we were importing DropdownMenuTrigger directly from @radix-ui/react-dropdown-menu while importing the other dropdown menu components from our shadcn UI components. This inconsistency breaks the context relationship between the dropdown menu components.

In Radix UI (which shadcn/ui is built on), components like DropdownMenuTrigger must be used within the context provided by their parent component (DropdownMenu). When you import some components from the shadcn wrapper and others directly from Radix, they don't share the same context.

The fix ensures all dropdown menu components are imported from the same place - our shadcn UI components at @/components/ui/dropdown-menu. This maintains the proper component hierarchy and context relationship.

Now the data table should work correctly without the context error. All the features you requested (virtualized infinite scrolling, row selection, sorting, column ordering, and fuzzy search) should function as expected.