I am trying to display nested json object data in DataTable by using functional componenets. how to use map() function in DataTable to display this nested type of data in functional components.
How can this be done in "DataTables"? I am very new to "DataTables" and would appreciated your help. Thanks
Nested object data it would be like
{
"docs": [
{
"ticketeno": 1,
"title": "AA",
}
],
"total": 30,
"limit": 10,
"offset": 0
}
Code In the functional components-
function Tickete() {
const columns = [
{
key: "ticketeno",
text: "Tickete No",
className: "ticketeno",
align: "left",
sortable: true,
},
{
key: "title",
text: "Title",
className: "title",
align: "left",
sortable: true,
}
}
];
const config = {
page_size: 10,
length_menu: [10, 20, 50],
filename: "Usersdata",
no_data_text: 'No user found!',
language: {
length_menu: "Show _MENU_ result per page",
filter: "Filter in records...",
info: "Showing _START_ to _END_ of _TOTAL_ records",
pagination: {
first: "First",
previous: "Previous",
next: "Next",
last: "Last"
}
},
show_length_menu: true,
show_filter: true,
show_pagination: true,
show_info: true,
};
const ticketeList = useSelector((state) => state.ticketeList);
const { notes } = ticketeList;
const pageChange = (pageData) => {
console.log("OnPageChange", pageData);
}
return (
<div>
<h1>Users List</h1>
<ReactDatatable
config={config}
records={notes}
columns={columns}
onPageChange={pageChange}
/>
</div>
);
}
export default Tickete;