Question 222072 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I make columns hidden by default in MaterialTable?

my MaterialTable has a lot of columns and some of them are not necessarily needed to be displayed at all times. I want to make them hidden unless selected by user

I tried adding

hide: true

property to the column but it didn’t do anything

Code sample with hidden :

      {
    title: 'Department', field: 'department', filtering: false, editable: 'never',hidden: true,
    cellStyle: {
      width: 250,
      minWidth: 250,
      border: '1px solid #CCC',
      padding: 0
    },
    headerStyle: {
      width: 250,
      minWidth: 250
    }
  },
  { title: 'Owner', field: 'owner', filtering: false, editable: 'never', hidden: true},
  { title: 'Responsible', field: 'responsible', filtering: false, editable: 'never', hidden: true },

These 3 columns still show up in my table

More info on my question:

  • My app doesn’t use TypeScript, only JS and Atlassian SDK (Java)

  • I am not allowed to rewrite/redesign the app
    My code:

     const [state, setState] = React.useState({
 columns: [
   { title: 'Module', field: 'module', lookup: dynamicLookupObject, editable: 'never' },
   { title: 'Key', field: 'key', filtering: false, editable: 'never', render: rowData => <a href={rowData.key}>{rowData.key}</a>},
   {
     title: 'Summary', field: 'summary', filtering: false, editable: 'never',
     cellStyle: {
       width: 250,
       minWidth: 250,
       border: '1px solid #CCC',
       padding: 0
     },
     headerStyle: {
       width: 250,
       minWidth: 250
     }
   },
   { title: 'Task', field: 'task', filtering: false, editable: 'never', render: rowData => <a href={'rowData.task}>{rowData.task}</a> },
   { title: 'Team', field: 'team', lookup: { },
   {
     title: 'Department', field: 'department', filtering: false, editable: 'never',
     cellStyle: {
       width: 250,
       minWidth: 250,
       border: '1px solid #CCC',
       padding: 0
     },
     headerStyle: {
       width: 250,
       minWidth: 250
     }
   },
   { title: 'Owner', field: 'owner', filtering: false, editable: 'never' },
   { title: 'Responsible', field: 'responsible', filtering: false, editable: 'never' },
   { title: 'Status', field: 'status', filtering: false, editable: 'never' },

. . .

  return (
<div>

  <MaterialTable

    // //count total of "next month evaluation"
    components={{
      Body: props => <MTableBody {...props} onFilterChanged={(columnId, value) => {
        totalOfTeamEval = 0
        props.onFilterChanged(columnId, value);
        value = value
        console.log(value)
        var arrData = state.data
        var filteredData = arrData.filter(function (item) { return item.module == value; });
        var totalOfTeamEval = 0

        });
        setState(prevState => ({ ...prevState, totalOfTeamEval }), () => resolve());



      }} />

    }}
    title="IDEA report"
    columns={state.columns}
    data={state.data}
    icons={{ Edit: () => <EditIcon style={{ fontSize: 15, padding: 0 }} /> }}
    editable={{

. . .

Tags:

2

Answers


  1. 0

    If you are just using a basic Material UI (MUI) Table, then I think what you are really after is the MUI Data Grid which comes with functionality for toggling columns.

    Checkout the docs for Data Grid here

    Using MUI Data Grid you can update the column visibility by setting columns.columnVisibilityModel prop for the initialState on the DataGrid component

    <DataGrid
  columns={...}
  rows={...}
  initialState={{
    // other initial state values...
    columns: {
      columnVisibilityModel: {
        // Initially hide the id and status columns
        id: false,
        status: false
      },
    },
  }}
/>

    The columnVisibilityModel has a TypeScript type like Record<GridKey, boolean> where the GridKey is one of the field value in your column definition.

    Docs for column visibility here

    Here is a Code Sandbox with the above code snippet in action

    Hope this helps!

    Update: Adding answer based on OP’s potential use of Material Table library

    If you are using the Material Table library then you just have use column.hidden instead. The hide prop doesn’t exist in that library’s column config.

    Try this:

    hidden: true

    In context it would look like this:

    <MaterialTable
  columns={[
    { title: "Adı", field: "name" },
    { title: "Soyadı", field: "surname" },
    { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
    {
      title: "Doğum Yeri",
      field: "birthCity",
      lookup: { 34: "İstanbul", 63: "Şanlıurfa" },

      // This is what you want
      hidden: true
    },
  ]}
  data={[{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }]}
  title="Demo Title"
/>
    Login or Signup to reply.
  2. 0

    1. First, make sure you have installed the material-table package. If not, you can install it using npm or yarn:
      npm install material-table or yarn add material-table

    2. Next, in your React component where you are using MaterialTable, define the column configuration and set the hidden property for the columns you want to hide by default.

    For example:
    import React from ‘react’;
    import MaterialTable from ‘material-table’;

    const MyTable = () => {
  const columns = [
    { title: 'ID', field: 'id', hidden: true }, // This column will be hidden by default
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age', hidden: true }, // This column will be hidden by default
    { title: 'Country', field: 'country' },
  ];

  const data = [
    { id: 1, name: 'John', age: 30, country: 'USA' },
    { id: 2, name: 'Jane', age: 25, country: 'Canada' },
    // Add more data here
  ];

  return (
    <MaterialTable
      columns={columns}
      data={data}
      title="My Table"
    />
  );
};

export default MyTable;

    In this example, the ID and Age columns will be hidden by default when the table is rendered. If you need to show or hide columns dynamically based on user interactions or application logic, you can also use the hidden property in conjunction with state management to control the column visibility at runtime.

    By setting the hidden property for specific columns, you can ensure that those columns remain hidden by default when the MaterialTable component is rendered.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search