title: MUIDataTable: In react application viewColumns options how to display the Checkbox List for column vertically
body: <p>I have a MUI Table Implementation such that the options object viewColumns is set to true, which is supposed to display the popper to choose the columns to be displayed in vertical list of checkbox as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/16yRs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/16yRs.png" alt="enter image description here"></a></p>
  
  <p>, but I am getting it horizontally as displayed in screenshot below:</p>
  
  <p><a href="https://i.stack.imgur.com/qUYjq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qUYjq.png" alt="enter image description here"></a></p>
  
  <p>The options to be passed in MUIDataTable components is defined as:</p>
  
  <pre><code>const options = {
        filter: true,
        filterType: "dropdown",
        print: false,
        viewColumns: true,
        selectableRows: false,
        onRowClick: (rowData) =&gt; {
          console.log("RowClicked-&gt;", rowData);
        },
        responsive: "stacked",
        fixedHeaderOptions: {
          xAxis: false,
          yAxis: true,
        },
      };
  </code></pre>
  
  <p>columns defines as:</p>
  
  <pre><code>export const DEAL_GRID_COLUMNS = [
    {
      name: "someReference",
      label: "Some Reference",
      options: {
        filter: true,
        sort: true,
      },
    },
    {
      name: "businessTeam",
      label: "Business Teams",
      options: {
        filter: true,
        sort: true,
      },
    },
    {
      name: "keyContact",
      label: "Key Contact Lead",
      options: {
        filter: true,
        sort: true,
      },
    },
  .....
  .....
  .....
  .....
  ];
  </code></pre>
  
  <p>and the component is consumed as </p>
  
  <pre><code>&lt;MUIDataTable data={gridData} columns={DEAL_GRID_COLUMNS} options={options} /&gt;
  </code></pre>
  
  <p>here <code>gridData</code> is recieved from Api response</p>