---
title: 测试filter
name: ddd
terminal: PC
category: General
scene: Common
---

详情展示

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Fitler from '../src';

const list = [
  {
    label: '总的',
    value: '1',
    children: [
      {
        label: '孩子11',
        value: '4',
        children: [
          {
            label: '孩子111',
            value: '111',
          },
          {
            label: '孩子112',
            value: '112',
          },
        ],
      },
      {
        label: '孩子12',
        value: '5',
        children: [
          {
            label: '孩子113',
            value: '113',
          },
          {
            label: '孩子114',
            value: '114',
          },
        ],
      },
    ],
  },
  {
    label: '外部',
    value: '2',
  },
  {
    label: '外部2',
    value: '3',
  },
  {
    label: '外部11',
    value: '6',
  },
  {
    label: '外部7',
    value: '7',
  },
  {
    label: '外部8',
    value: '8',
  },
];

let dataSource = [
  {
    id: 1,
    province: '安徽',
    joins: '2234324',
    onerate: '45%',
    tworate: '65%',
    hcrate: '87.3%',
    width: 200,
  },
  {
    id: 2,
    province: '浙江',
    joins: '1692388',
    onerate: '46%',
    tworate: '69.2%',
    hcrate: '92.3%',
    width: 200,
  },
  {
    id: 3,
    province: '山东',
    joins: '3823232',
    onerate: '55%',
    tworate: '72.8%',
    hcrate: '78.3%',
    width: 200,
  },
  {
    id: 4,
    province: '山东',
    joins: 'true',
    onerate: '55%',
    tworate: '72.8%',
    hcrate: '78.3%',
    width: 200,
  },
];

function App(props) {
  return (
    <div>
      <Fitler
        column={{
          cell(value, rowIndex, row) {
            return value + rowIndex;
          },
        }}
        labelKey='joins'
        valueKey='id'
        list={dataSource}
      />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);
```

```css
.my-css {
  /* codes here */
  color: #fff;
}
```