Group Column value using Datatable in React JS

Question

Hi Team I will share samle screen existing and new. I need exactly out put.

Sangeetha S · Answer

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 ( Category Item {Object.entries(groupedData).map(([category items]) => ( {category} {items[0].item} {items.slice(1).map((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; 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.

amar Praveen · Answer

Need full example it's only single value .Can you please share screen shot of output.

Sangeetha S · Answer

Hi Grouped Data in a DataTable general example import React from 'react'; const DataTable = ({ groupedData }) => { return ( Category Item {Object.entries(groupedData).map(([category items]) => ( {category} {items[0].item} {items.slice(1).map((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;