Mixing
MUI-Datatable expandable rows
0
I am trying to have nested tables. A table and when specific table row is clicked another table expands right below it(with clear difference from main table) and data related to that specific row will be displayed in that sub table. Each row should be able to render the sub table.
I am trying to follow their official documentation but failed to do so.
Below is a code sample that I have copied from their docs.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000"
],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
any help would be appreciated.
javascript reactjs material-ui mui-datatable
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
add a comment |
0
I am trying to have nested tables. A table and when specific table row is clicked another table expands right below it(with clear difference from main table) and data related to that specific row will be displayed in that sub table. Each row should be able to render the sub table.
I am trying to follow their official documentation but failed to do so.
Below is a code sample that I have copied from their docs.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000"
],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
any help would be appreciated.
javascript reactjs material-ui mui-datatable
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
add a comment |
0
0
0
I am trying to have nested tables. A table and when specific table row is clicked another table expands right below it(with clear difference from main table) and data related to that specific row will be displayed in that sub table. Each row should be able to render the sub table.
I am trying to follow their official documentation but failed to do so.
Below is a code sample that I have copied from their docs.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000"
],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
any help would be appreciated.
javascript reactjs material-ui mui-datatable
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
I am trying to have nested tables. A table and when specific table row is clicked another table expands right below it(with clear difference from main table) and data related to that specific row will be displayed in that sub table. Each row should be able to render the sub table.
I am trying to follow their official documentation but failed to do so.
Below is a code sample that I have copied from their docs.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000"
],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
any help would be appreciated.
javascript reactjs material-ui mui-datatable
javascript reactjs material-ui mui-datatable
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
asked Jan 1 at 7:00
Adeel TahirAdeel Tahir
427
427
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Have you tried adding the expandableRows option?
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
expandableRows: true // Try Adding This
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
answered yesterday
J.LangfordJ.Langford
404
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993615%2fmui-datatable-expandable-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Have you tried adding the expandableRows option?
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
expandableRows: true // Try Adding This
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
answered yesterday
J.LangfordJ.Langford
404
add a comment |
0
Have you tried adding the expandableRows option?
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
expandableRows: true // Try Adding This
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
answered yesterday
J.LangfordJ.Langford
404
add a comment |
0
0
0
Have you tried adding the expandableRows option?
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
expandableRows: true // Try Adding This
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
answered yesterday
J.LangfordJ.Langford
404
Have you tried adding the expandableRows option?
const options = {
filterType: "dropdown",
responsive: "scroll",
selectableRows : true,
expandableRows: true // Try Adding This
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta);
return (
<TableRow>
<TableCell colSpan={rowData.length}>
Custom expandable row option. Data: {JSON.stringify(rowData)}
</TableCell>
</TableRow>
);
}
};
answered yesterday
J.LangfordJ.Langford
404
answered yesterday
J.LangfordJ.Langford
404
answered yesterday
J.LangfordJ.Langford
404
answered yesterday
J.LangfordJ.Langford
404
404
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993615%2fmui-datatable-expandable-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
