CODEWITHSUNDEEP
reactjsdatatableprimereact
Abraham Johannes
Abraham Johannes

Reputation: 37

How to hide specific columns of a prime react datatable on mobile devices

return (
    <DataTable value={data}>
        <Column field="column1" header="Column 1" />
        <Column field="column2" header="Column 2" />
        <Column field="column3" header="Column 3" />
        <Column field="column4" header="Column 4" />
        <Column field="column5" header="Column 5" />
        <Column field="column6" header="Column 6" />
        <Column field="column7" header="Column 7" />
    </DataTable>
);

I have created a react datatable using primereact UI library, how can I remove some columns in mobile view.

Upvotes: 0

Views: 307

Answers (1)

Malena Trejo
Malena Trejo

Reputation: 1

I think this answer is a little late, but still...

I had to do something similar, and I finally got it by hiding the column with css, like this:

<Column field="column_1" header="value 1" style={{display: currentView === 3 ? ' ' : 'none' }}></Column>
<Column field="column_1" header="value 2" style={{display: currentView === 3 ? ' ' : 'none' }}></Column>

I took it from this documentation:

https://forum.primefaces.org/viewtopic.php?t=58893

Upvotes: 0

Related Questions