import React from 'react'; import './styles.css'; const useSortableData = (items, config = null) => { const [sortConfig, setSortConfig] = React.useState(config); const sortedItems = React.useMemo(() => { let sortableItems = [...items]; if (sortConfig !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0; }); } return sortableItems; }, [items, sortConfig]); const requestSort = (key) => { let direction = 'ascending'; if ( sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending' ) { direction = 'descending'; } setSortConfig({ key, direction }); }; return { items: sortedItems, requestSort, sortConfig }; }; const ProductTable = (props) => { const { items, requestSort, sortConfig } = useSortableData(props.products); const getClassNamesFor = (name) => { if (!sortConfig) { return; } return sortConfig.key === name ? sortConfig.direction : undefined; }; return ( {items.map((item) => ( ))}

Products

{item.name}	${item.price}	{item.stock}

); }; export default function App() { return (

); }

Table sorting example