FilterPanel

导入

import { FilterPanel } from '@visactor/vbi-react/components'

签名

FilterPanel(props: FilterPanelProps)

说明

提供 Where / Having 过滤条件的新增、编辑、删除与分组展示能力。

推荐先看

Live Demo

FilterPanel Demo
Where filters
  • No where filters
Having filters
  • No having filters
{
  "uuid": "c93f9ba5-f266-4086-b6cb-8361ada65db8",
  "connectorId": "vbiReactStarterApiDemoConnector",
  "chartType": "table",
  "theme": "light",
  "locale": "zh-CN",
  "version": 0,
  "whereFilter": {
    "id": "root",
    "op": "and",
    "conditions": []
  },
  "havingFilter": {
    "id": "root",
    "op": "and",
    "conditions": []
  },
  "measures": [],
  "dimensions": []
}

最小示例

import type { VBIChartBuilder } from '@visactor/vbi'
import { FilterPanel } from '@visactor/vbi-react/components'

export function Demo({ builder }: { builder: VBIChartBuilder }) {
  return <FilterPanel builder={builder} />
}