import React, { useEffect, useState } from "react";
import MaterialReactTable from "material-react-table";
const Basic = () => {
const [columns, setColumns] = useState([]);
const [data, setData] = useState([]);
useEffect(() => {
// Do something and set columns and data
setColumns([
{
accessorKey: "name.firstName", //access nested data with dot notation
header: "First Name",
},
{
accessorKey: "name.lastName",
header: "Last Name",
},
{
accessorKey: "address", //normal accessorKey
header: "Address",
},
{
accessorKey: "city",
header: "City",
},
{
accessorKey: "state",
header: "State",
},
]);
setData([
{
name: {
firstName: "John",
lastName: "Doe",
},
address: "261 Erdman Ford",
city: "East Daphne",
state: "Kentucky",
},
{
name: {
firstName: "Jane",
lastName: "Doe",
},
address: "769 Dominic Grove",
city: "Columbus",
state: "Ohio",
},
{
name: {
firstName: "Joe",
lastName: "Doe",
},
address: "566 Brakus Inlet",
city: "South Linda",
state: "West Virginia",
},
{
name: {
firstName: "Kevin",
lastName: "Vandy",
},
address: "722 Emie Stream",
city: "Lincoln",
state: "Nebraska",
},
{
name: {
firstName: "Joshua",
lastName: "Rolluffs",
},
address: "32188 Larkin Turnpike",
city: "Charleston",
state: "South Carolina",
},
]);
}, []);
return <MaterialReactTable columns={columns} data={data} enableGrouping />;
};
export default Basic;
By using this simple code to reproduce the Show/Hide Columns function cannot be used.
use the above sample code I provided, the Show/Hide columns function shows empty.