score:7
you can have the columns in the component as a function
.
then according to the state you can hide or show different columns.
you can add a classname
to the columns or directly not render it.
getcolumns = () => [
{
title: 'client name',
dataindex: 'clientname',
classname: this.state.columns['clientname'] ? "show" : "hide"
}
];
render() {
return <table columns={this.getcolumns()}>
}
score:0
i managed to solve such a problem by creating a copy of the original column array and an array that would hold the dataindex that is equal for each. then i replace the current column array with the filtered one. below the code:
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
key: i,
name: `edward king ${i}`,
age: 32,
address: `london, park lane no. ${i}`,
});
}
class app extends react.component {
state = {
value: false,
checkedcolumns: [],
visiblemenusettings: false,
columns: [
{
title: 'name',
dataindex: 'name',
},
{
title: 'age',
dataindex: 'age',
},
{
title: 'address',
dataindex: 'address',
},
],
initialcolumns: []
};
componentdidmount() {
this.setstate({initialcolumns: this.state.columns})
}
handlevisiblechange = flag => {
this.setstate({ visiblemenusettings: flag });
};
onchange = (e) => {
var checkedcolumns = this.state.checkedcolumns
if(e.target.checked){
checkedcolumns = checkedcolumns.filter(id => {return id !== e.target.id})
}
else if(!e.target.checked){
checkedcolumns.push(e.target.id)
}
var filtered = this.state.initialcolumns;
for(var i =0;i< checkedcolumns.length; i++)
filtered = filtered.filter(el => {return el.dataindex !== checkedcolumns[i]})
this.setstate({columns: filtered, checkedcolumns: checkedcolumns})
}
render() {
const menu = (
<menu>
<menu.itemgroup title="columns" >
<menu.item key="4"><checkbox id="age" onchange={this.onchange} defaultchecked>age</checkbox></menu.item>
<menu.item key="5"><checkbox id="address" onchange={this.onchange} defaultchecked>address</checkbox></menu.item>
</menu.itemgroup>
</menu>
);
return (
<div>
<dropdown
overlay={menu}
onvisiblechange={this.handlevisiblechange}
visible={this.state.visiblemenusettings}
>
<button>show/hide</button>
</dropdown>
<table columns={this.state.columns} datasource={data} />
</div>
);
}
}
also here is a working example: https://stackblitz.com/edit/antd-showhidecolumns
score:0
more elegant solution (use conditional array element):
const cols= [
{
title: 'name',
dataindex: ['name'],
key: 'name',
},
iselectron()?
{
title: 'download',
render: (val) => (<button icon={<downloadoutlined />} onclick={()=>downloadreportelectron(val)} />),
width: 100,
} :
{
width: 0,
},
{
title: 'some',
dataindex: ['some'],
key: 'some',
},
just something to know:
[{x},con?{x}:{},{x}] //would have worked, but it will render a col with width
that's where {width: 0,}
comes from.
Source: stackoverflow.com
Related Query
- Ant Design for React : Show/Hide columns
- How to show and hide some columns on React Table?
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- ant design v4 breaks react testing library tests for Select and Autocomplete
- Ant Design for react native truly native components?
- React Ant Design - Form items to be split into 2 columns
- Ant Design react - change default spinner for all components
- React Ant Design - best place to generate columns in functionnal component
- Ant design Tree defaultExpandAll doesnt work with button click for react
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- Loading styles in ant design ui for react components
- Align columns and rows for ant design table
- React JS how to show password in input field for 5 seconds and then hide it?
- How to solve eslint error issues for Ant design in react
- Ant Design for React : Show/Hide particular column
- hide or show a button for authenticated user in react
- How to hide columns for which rows do not hold any data in devextreme react grid?
- How to toggle show and hide password for multiple field in React
- React semantic UI table show and hide columns
- React js - Add unique key for ant design switch
- How to hide sidebar in React using Ant Design
- Show or hide element in React
- React | Ant design select default value
- Design Redux actions and reducers for a React reusable component
- how to hide and show a div in react
- React show Material-UI Tooltip only for text that has ellipsis
- How to show results of a map in two or more columns using react
- React Ant Design styles not loading
- How can I use initialValue for DatePicker in Form.Item of Ant Design
- Using ref with React Hooks in Ant design (antd) Table component with customized filters
More Query from same tag
- Input clear button does not work in Microsoft Edge
- How to Reload in ReactJS without refreshing the page?
- How to run fake json backend from terminal
- How can I update only a single cell value and JSON in table
- react usestate hooks error: argument of type 'yyy' is not assignable to parameter of type 'setstateaction<xx>'
- Disable or render checkbox label background highlighting as transparent on click
- How to update content on page from a modal window using react-router-dom
- How can I fetch JSON files from a folder, in a React + React-Router app?
- sh: react-scripts: command not found after running npm start
- Combine two different but pretty similar functions on onChange event
- FastField not working as expected in Formik
- How to make submit button to work / react?
- React - What's the great benefit of having immutable props?
- Does object destructing uses more memory if i use it in most of the components?
- How to send JSON object from express server to next js page?
- Toggle switch in reactjs
- Resize input form
- Setting "active" className for the menu user selected in React
- Can ReactJS initialize its state based on a server-side rendered DOM?
- How to add react.js to spring mvc application
- Typescript error: Property 'flat' does not exist on type '[string, unknown][]'
- How to properly erase an element from a React state array?
- Why are scripts refusing to load in Google Analytics Chrome extension when I included the recommended security override?
- Is it possible to have two states in one react component
- How to decide when to pass parameter & when not
- How do I resolve "Cannot find module" when pointing to a branch?
- React hook equivalent to callback function after setting state
- Axios request automatically set url
- How to refactor code inside switch statement using react?
- Why does create-react-app creates both App.js and index.js?