GPT

Component Architecture

// Virtualized data table with performance optimization import React, { memo, useCallback } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; interface DataTableProps { data: Array ; columns: Col

Prompt text

Original English text. Replace placeholders with your own details.

// Virtualized data table with performance optimization
import React, { memo, useCallback } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

interface DataTableProps {
 data: Array<Record<string, any>>;
 columns: Column[];
 onRowClick?: (row: any) => void;
}

export const DataTable = memo<DataTableProps>(({ data, columns, onRowClick }) => {
 const parentRef = React.useRef<HTMLDivElement>(null);

 const rowVirtualizer = useVirtualizer({
 count: data.length,
 getScrollElement: () => parentRef.current,
 estimateSize: () => 50,
 overscan: 5,
 });

 const handleRowClick = useCallback((row: any) => {
 onRowClick?.(row);
 }, [onRowClick]);

 return (
 <div ref={parentRef} className="h-96 overflow-auto" role="table" aria-label="Data table">
 {rowVirtualizer.getVirtualItems().map((virtualItem) => {
 const row = data[virtualItem.index];
 return (
 <div
 key={virtualItem.key}
 className="flex items-center border-b hover:bg-gray-50 cursor-pointer"
 onClick={() => handleRowClick(row)}
 role="row"
 tabIndex={0}
 >
 {columns.map((col) => (
 <div key={col.key} className="px-4 py-2 flex-1" role="cell">
 {row[col.key]}
 </div>
 ))}
 </div>
 );
 })}
 </div>
 );
});

Source & attribution

Awesome Prompts · Awesome Prompts

Source-listed license: GPL-3.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →