Comment afficher et masquer certaines colonnes sur React Table?
J'ai créé une table React. Je souhaite masquer ou afficher certaines colonnes de ma table par action de l'utilisateur. Par défaut, toutes les colonnes doivent être visibles, mais nous aurons des cases à cocher pour masquer ou afficher certaines Colonnes.
Supposons que je veuille afficher 4 des 8 colonnes. Veuillez me suggérer une technique simple pour y parvenir.
Le tableau d'en-tête de colonne est
const columns = [
{
Header: 'Column 1',
columns: [
{
Header: 'S Column 1',
accessor: 'firstName'
}
]
},
{
Header: 'Column 2',
columns: [
{
Header: 'S Column 2',
accessor: 'firstName'
}
]
},
{
Header: 'Column 3',
columns: [
{
Header: 'S Column 3',
accessor: 'firstName'
}
]
},
{
Header: 'Column 4',
columns: [
{
Header: 'S column 4',
accessor: 'firstName'
}
]
},
{
Header: 'Column 5',
columns: [
{
Header: 'S column 5',
accessor: 'firstName'
}
]
},
{
Header: 'Column 6',
columns: [
{
Header: 'S column 6a',
accessor: 'firstName'
},
{
Header: 'S column 6b',
accessor: 'firstName'
},
{
Header: 'S column 6c',
accessor: 'firstName'
},
{
Header: 'S column 6d',
accessor: 'firstName'
}
]
},
{
Header: 'Column 7',
columns: [
{
Header: 'S column 7',
accessor: 'firstName'
}
]
},
{
Header: 'Column 8',
columns: [
{
Header: 'S Column 8a',
accessor: 'firstName'
},
{
Header: 'S Column 8b',
accessor: 'firstName'
},
{
Header: 'S Column 8c',
accessor: 'firstName'
},
{
Header: 'S Column 8d',
accessor: 'firstName'
}
]
},
];
Veuillez m'aider à réaliser cette fonctionnalité par la technique la plus simple.
Si vous le pouvez, vous pouvez montrer une démo sur codesandbox.
Dans la colonne, il y a une propriété show.show: true, // can be used to hide a column.
Rendre faux pour masquer la colonne particulière. Conservez les valeurs des cases à cocher de l'utilisateur dans l'état. https://react-table.js.org/#/story/readme