Hi,

import React from 'react';

const groupData = (data) => {
    return data.reduce((acc, item) => {
        if (!acc[item.category]) {
            acc[item.category] = [];
        }
        acc[item.category].push(item);
        return acc;
    }, {});
};

const DataTable = ({ groupedData }) => {
    return (
        
                {Object.entries(groupedData).map(([category, items]) => (
                    
Category<\/th>
Item<\/th><\/tr><\/thead>
{category}<\/td>
{items[0].item}<\/td><\/tr>
                        {items.slice(1).map((item) => (
                            
{item.item}<\/td><\/tr>
                        ))}
                    <\/React.Fragment>
                ))}
            <\/tbody><\/table>
    );
};

const App = () => {
    const data = [
        { id: 1, category: 'Fruits', item: 'Apple' },
        { id: 2, category: 'Fruits', item: 'Banana' },
        { id: 3, category: 'Vegetables', item: 'Carrot' },
        { id: 4, category: 'Fruits', item: 'Orange' },
        { id: 5, category: 'Vegetables', item: 'Lettuce' },
    ];

    const groupedData = groupData(data);

    return (
        
Grouped Data Table<\/h1><\/div>
    );
};

export default App;

 run this code, and table that looks like this:


	

		

			
Category
			
Item
		
	
	

		

			
Fruits
			
Apple
		
		

			
 
			
Banana
		
		

			
 
			
Orange
		
		

			
Vegetables
			
Carrot
		
		

			
 
			
Lettuce
		
	



	
Grouped by Category: The first column shows the category name and is grouped. For example, "Fruits" is shown once, and all items under "Fruits" are listed below it.
	
Items Listed: Each item under the category is displayed in the second column.
+1
AP
amar Praveen1y agoPosted Dec 12, 2024, 4:32 AM
Need full example it's only single value .Can you please share screen shot of output.
+1
Sangeetha S1y agoPosted Dec 2, 2024, 6:21 AM
Hi,

Grouped Data in a DataTable general example 

import React from 'react';

const DataTable = ({ groupedData }) => {
    return (
        
                {Object.entries(groupedData).map(([category, items]) => (
                    
                        {items.slice(1).map((item) => (
                            
                        ))}
                    
                ))}
            
Category
Item
{category}
{items[0].item}
{item.item}
    );
};

const App = () => {
    const data = [
        { id: 1, category: 'Fruits', item: 'Apple' },
        { id: 2, category: 'Fruits', item: 'Banana' },
        { id: 3, category: 'Vegetables', item: 'Carrot' },
        { id: 4, category: 'Fruits', item: 'Orange' },
        { id: 5, category: 'Vegetables', item: 'Lettuce' },
    ];

    const groupedData = groupData(data);

    return (
        
Grouped Data Table

    );
};

export default App;
+1