S2

注意

阅读本章前，请确保已经阅读过基础交互，Tooltip 注意事项等章节。

当你想降低不重要信息干扰时，可以隐藏列头，方便你更直观的查看数据，有三种方式隐藏列头。

1. 手动隐藏 - 通过点击

在 @antv/s2 中，可以通过自定义 tooltip 内容的方式添加 隐藏按钮, @antv/s2-react 中已经内置，点击列头 tooltip 内的 隐藏 按钮即可。

关闭交互式隐藏：

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

2. 自动隐藏 - 通过配置

可配置默认隐藏的列头，支持透视表和明细表。

1. 明细表

如果是单列头的明细表，指定 s2DataConfig.fields.columns 的任意字段即可。

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

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

preview

对于自定义列头的明细表，需要指定单元格的对应节点 id。

如何获取列头 ID?

const s2 = new TableSheet()

await s2.render()

console.log(s2.facet.getColNodes())

const s2DataConfig = {
  fields: {
    columns:  [
      {
        field: 'a-1',
        title: '自定义节点 a-1',
        children: [
          {
            field: 'a-1-1',
            title: '自定义节点 a-1-1',
          },
        ],
      },
      {
        field: 'a-2',
        title: '自定义节点 a-2',
        children: [],
      }
    ]
  }
};

const s2Options = {
  interaction: {
    hiddenColumnFields: ['root[&]a-1[&]a-1-1']
  }
}

2. 透视表

透视表存在多列头，需要指定列头对应的节点 id, 自定义列头同理，这里不再赘述。

如何获取列头 ID?

const s2 = new PivotSheet()

await s2.render()

console.log(s2.facet.getColNodes())

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

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

preview

hiddenColumnFields 支持自动分组，举个示例，比如隐藏的是 province, type, price

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

第二列 city 未配置隐藏，那么就会得到两组

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

从而渲染两个隐藏按钮，按钮之间独立作用，点击第一个展开按钮，展开 province, 点击第二个展开按钮，展开 type 和 price

preview

还可以集成分析组件，通过改变配置的方式，实现动态隐藏列头，具体请查看分析组件

3. 手动隐藏 - 通过实例方法

查看所有 API

const s2 = new TableSheet(...)

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

获取隐藏列头数据

可通过 S2Event 透出的 COL_CELL_EXPANDED 和 COL_CELL_HIDDEN 分别监听列头的展开和隐藏可通过 S2Event 透出的 COL_CELL_EXPAND_ICON_HOVER 获取当前位置的隐藏列

import { S2Event } from '@antv/s2'

const s2 = new TableSheet(...);

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

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

s2.on(
  S2Event.COL_CELL_EXPAND_ICON_HOVER,
  ({event, meta, hiddenColumns}) => {
    console.log('当前位置隐藏列', hiddenColumns)
  }
)

也可以访问存储在 store 的 hiddenColumnsDetail 主动获取

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

注意

阅读本章前，请确保已经阅读过基础交互，Tooltip 注意事项等章节。

当你想降低不重要信息干扰时，可以隐藏列头，方便你更直观的查看数据，有三种方式隐藏列头。

1. 手动隐藏 - 通过点击

在 @antv/s2 中，可以通过自定义 tooltip 内容的方式添加 隐藏按钮, @antv/s2-react 中已经内置，点击列头 tooltip 内的 隐藏 按钮即可。

关闭交互式隐藏：

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

2. 自动隐藏 - 通过配置

可配置默认隐藏的列头，支持透视表和明细表。

1. 明细表

如果是单列头的明细表，指定 s2DataConfig.fields.columns 的任意字段即可。

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

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

preview

对于自定义列头的明细表，需要指定单元格的对应节点 id。

如何获取列头 ID?

const s2 = new TableSheet()

await s2.render()

console.log(s2.facet.getColNodes())

const s2DataConfig = {
  fields: {
    columns:  [
      {
        field: 'a-1',
        title: '自定义节点 a-1',
        children: [
          {
            field: 'a-1-1',
            title: '自定义节点 a-1-1',
          },
        ],
      },
      {
        field: 'a-2',
        title: '自定义节点 a-2',
        children: [],
      }
    ]
  }
};

const s2Options = {
  interaction: {
    hiddenColumnFields: ['root[&]a-1[&]a-1-1']
  }
}

2. 透视表

透视表存在多列头，需要指定列头对应的节点 id, 自定义列头同理，这里不再赘述。

如何获取列头 ID?

const s2 = new PivotSheet()

await s2.render()

console.log(s2.facet.getColNodes())

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

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

preview

hiddenColumnFields 支持自动分组，举个示例，比如隐藏的是 province, type, price

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

第二列 city 未配置隐藏，那么就会得到两组

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

从而渲染两个隐藏按钮，按钮之间独立作用，点击第一个展开按钮，展开 province, 点击第二个展开按钮，展开 type 和 price

preview

还可以集成分析组件，通过改变配置的方式，实现动态隐藏列头，具体请查看分析组件

3. 手动隐藏 - 通过实例方法

查看所有 API

const s2 = new TableSheet(...)

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

获取隐藏列头数据

可通过 S2Event 透出的 COL_CELL_EXPANDED 和 COL_CELL_HIDDEN 分别监听列头的展开和隐藏可通过 S2Event 透出的 COL_CELL_EXPAND_ICON_HOVER 获取当前位置的隐藏列

import { S2Event } from '@antv/s2'

const s2 = new TableSheet(...);

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

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

s2.on(
  S2Event.COL_CELL_EXPAND_ICON_HOVER,
  ({event, meta, hiddenColumns}) => {
    console.log('当前位置隐藏列', hiddenColumns)
  }
)

也可以访问存储在 store 的 hiddenColumnsDetail 主动获取

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