When you want to reduce the interference of unimportant information, you can hide the column header so that you can view the data more intuitively. There are three ways to hide the column header

1. Manual Hide - by clicking

Click the column header and click the隐藏button in the pop-up tooltip

Turn off interactive hiding

const s2Options = {
  tooltip: {
    operation: {
      hiddenColumns: false,
    },
  },
}

2. Autohide - via configuration

Configurable default hidden column headers, pivot tables and schedules

1. Schedule

There is no multi-column header in the detailed table, just specify any field in the columns of fields

const s2DataConfig = {
  fields: {
    columns: ['province', 'city', 'type', 'price'],
  },
};

const s2Options = {
  interaction: {
    hiddenColumnFields: ['city']
  }
}

2. Pivot table

There are multiple column headers in the pivot table, and the node id corresponding to the column header needs to be specified

 // /docs/api/basic-class/spreadsheet
const s2 = new PivotSheet()
console.log(s2.facet.getColCellNodes())

const s2DataConfig = {
  fields: {
    rows: [
      'province',
      'city'
    ],
    columns: [
      'type',
      'sub_type'
    ],
    values: [
      'number'
    ],
    valueInCols: true
  },
}

const s2Options = {
  interaction: {
    hiddenColumnFields: ['root[&]家具[&]沙发[&]number'],
  }
}

hiddenColumnFields support automatic grouping, for example, hidden is province , type , price

const s2Options = {
  interaction: {
    hiddenColumnFields: ['province', 'type', 'price']
  }
}

The second column city is not configured to hide, then you will get two groups

• ['province']
• ['type', 'price']

In this way, two hidden buttons are rendered, and the buttons work independently. Click the first expand button to expand province , click the second expand button to expand type and price

You can also integrate the analysis component, and realize dynamic hiding of column headers by changing the configuration method. For details, please refer to the analysis component

3. Manual hiding - via instance method

const s2 = new PivotSheet(...)

const hiddenColumnFields = ['province', 'type', 'price']
s2.interaction.hideColumns(hiddenColumnFields)

Get hidden column header data

COL_CELL_EXPANDED and COL_CELL_HIDDEN that can be exposed through S2Event monitor the expansion and hiding of the column header respectively

import { S2Event } from '@antv/s2'

const s2 = new PivotSheet(...);

s2.on(S2Event.COL_CELL_EXPANDED, (cell) => {
  console.log('列头展开', cell);
});

s2.on(
  S2Event.COL_CELL_HIDDEN,
  (currentHiddenColumnsInfo, hiddenColumnsDetail) => {
    console.log('列头隐藏', currentHiddenColumnsInfo, hiddenColumnsDetail);
  },
);

You can also access the hiddenColumnsDetail stored in the store to actively obtain

const hiddenColumnsDetail = s2.store.get('hiddenColumnsDetail')
console.log(hiddenColumnsDetail)