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;

Group Column value using Datatable in React JS

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (3)