Ag 그리드에서 열을 숨기는 방법

Ag 그리드에서 열을 숨기는 방법

데이터베이스에서 데이터를 가져와 수동 작업 버튼 열을 Ag-Grid에 추가하여 데이터를 채우고 있습니다.첫 번째 열은 이러한 액션버튼으로 구성되어 있고 두 번째 열은 _id I want to hide that second columns beholding ag-grid documentation에서는 정적 데이터의 컬럼 숨김에 대한 정보만 제공되고 있습니다.여기 열 def가 있는 내 코드가 있습니다.

setMasterData (state, payload) {
if (!payload) {
  state.tableData.rows = [];
} else {
  // First column holds the buttons to delete the row item
  let cols = [{
    field: '',
    headerName: 'Actions',
    width: 200,
    colId: 'params',
    cellRendererFramework: 'gridEditButtons'
  }];
  cols = cols.concat(Object.keys(payload[0]).map(x => {
    return {
      field: x,
      headerName: x.replace(/([A-Z])/g, ' $1').replace(/^./, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); })
    };
  }));
  state.tableData.cols = cols;
  state.tableData.rows = payload;
 }
}

작업 열 뒤에 있는 다음 열을 숨기려면 어떻게 해야 합니까?

 ...gridColumnApi.setColumnVisible('name of column', false);

한 가지 방법은 열 이름을 기준으로 가시성을 끄는 것입니다.

숨길 열 정의에 이 속성이 있습니다.

hide: true

---

갱신하다

당신이 제공한 코드가map다음과 같이 할 수 있습니다.

cols = cols.concat(Object.keys(payload[0]).map(x => {
    return {
      field: x,
      hide: x === '_Id',    // this will be true when your field == '_Id'
      headerName: x.replace(/([A-Z])/g, ' $1').replace(/^./, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); })
    };
  }));

조건 제공:hide에 해당될 것이다_Id따라서 이 열은 숨겨집니다.

언급URL : https://stackoverflow.com/questions/51330430/how-to-hide-column-in-ag-grid