React-Data-Table-Component Hide Show Column Base On Conditions

Question

I was writing a reactjs code and I use react-data-table-component, my table showed perfectly but i wanted to hide/show a column base on condition if true or false but I do not know where to write my javascript/typescript expression for the condition to determine if the column will be show or not. See below the basic code to display record in react-data-table-component:

//building the columns header
const columns = [
    {
        name: 'Title',
        selector: row => row.title,
    },
    {
        name: 'Year',
        selector: row => row.year,
    },
 {
      /*How do i write javascript conditional code here to determine if this column will be shown or not */
        name: 'Salary',
        selector: row => row.year,
        
    },
];

const data = [
    {
        id: 1,
        title: 'Beetlejuice',
        year: '1988',
        salary: '5000'
    },
    {
        id: 2,
        title: 'Ghostbusters',
        year: '1984',
        salary: '5000'
    },
]

function MyComponent() {
    return (
        <DataTable
            columns={columns}
            data={data}
        />
    );
};

My challenge is how/where do I write code to display or hide the column because all efforts to write the javascript/typescript in the column object didn't work. Note that I was able to manipulate or change record at row level using the conditional-row approach but it is the entire column i want to hide/show should a condition is met or not.

Thank you fams.

Tanya Tsodikovich · Accepted Answer · 2023-07-05 09:38:03Z

2

You can dynamically omit a column using "omit" prop as shown in the documentation

For example:

<DataTable
            columns={[
                {
                    name: "ID",
                    selector: row => row.id,
                },
                {
                    name: "Other Data",
                    selector: row => row.otherData,
                    omit: hideData === true
                }
            ]}
            data={data}
        />}

answered Jul 5, 2023 at 9:38

Tanya Tsodikovich

537 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alula48 · Accepted Answer · 2023-04-27 10:59:45Z

0

Have you tried making a separate column, or writing a column object builder? You can append the column you want depending on your condition, and set that build to the columns object your table uses.

answered Apr 27, 2023 at 10:59

Alula48

491 silver badge7 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React-Data-Table-Component Hide Show Column Base On Conditions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related