Data Table - Copy this React, Tailwind Component to your project

# Data Table Component Prompt (MVC Pattern Functional) ## Context Design a **Data Table** component for a React application using TypeScript and the MVC pattern. This component will utilize TanStack Table to create powerful, flexible, and highly customizable tables and data grids. It will support features like sorting, filtering, pagination, and dynamic data updates. ## Goals 1. Implement the **MVC pattern** in a functional style to manage table data, state, and interactions. 2. Provide a reusable and customizable data table component that can handle large datasets with performance optimization. 3. Ensure the table is fully interactive, accessible, and user friendly for a variety of data driven applications. ## MVC Design Breakdown ### Model The **model** will manage the state of the table, including data rows, column definitions, sorting, filtering, pagination, and any other custom state like row selection or expanded rows. ### View The **view** will render the table, dynamically updating based on the provided data and state. It will render headers, rows, pagination controls, and any relevant action buttons or filters. ### Controller The **controller** will handle user interactions like sorting, filtering, navigating through pages, and any other actions that update the table state. ## Props Interface ```typescript interface DataTableProps { data: Array<Record<string, any>>; // Array of data rows columns: Array<{ id: string; // Unique identifier for the column header: string; // Column header text accessor: string; // Field in the data row to be used for the column sortType?: 'asc' | 'desc'; // Default sorting order filterable?: boolean; // Whether the column can be filtered sortable?: boolean; // Whether the column can be sorted renderCell?: (value: any) => React.ReactNode; // Optional custom render function for the cell }>; onRowClick?: (rowData: Record<string, any>) => void; // Optional callback when a row is clicked pagination?: { pageSize: number; // Number of rows per page currentPage: number; // Current page number onPageChange: (page: number) => void; // Callback for changing pages }; sorting?: { sortBy: string; // Column to sort by direction: 'asc' | 'desc'; // Sorting direction onSortChange: (column: string, direction: 'asc' | 'desc') => void; // Callback for changing sort order }; filtering?: { filters: Record<string, any>; // Object of filters for columns onFilterChange: (filters: Record<string, any>) => void; // Callback for filter change }; isLoading?: boolean; // Show loading state when data is being fetched noResultsText?: string; // Text to show when no results are found rowSelection?: boolean; // Enable multi row selection renderRowAction?: (rowData: Record<string, any>) => React.ReactNode; // Optional custom row action rendering style?: React.CSSProperties; // Optional custom styling for the table }