React bootstrap table下一步转换列从按钮列表切换到选择下拉列表？

import React from 'react';
import { Table, TableHeaderColumn } from 'react-bootstrap';
import { DropdownButton, MenuItem } from 'react-bootstrap';

class MyTable extends React.Component {
  render() {
    const data = [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 30 },
      { id: 3, name: 'Bob', age: 35 },
    ];

    return (
      <Table data={data}>
        <TableHeaderColumn dataField="id" isKey>ID</TableHeaderColumn>
        <TableHeaderColumn dataField="name">Name</TableHeaderColumn>
        <TableHeaderColumn dataField="age" dataFormat={this.renderAgeColumn}>
          Age
        </TableHeaderColumn>
      </Table>
    );
  }

  renderAgeColumn(cell, row) {
    const ageOptions = [
      { value: '18-25', label: '18-25' },
      { value: '26-35', label: '26-35' },
      { value: '36+', label: '36+' },
    ];

    return (
      <DropdownButton title={cell} id={`age-dropdown-${row.id}`}>
        {ageOptions.map(option => (
          <MenuItem key={option.value} eventKey={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </DropdownButton>
    );
  }
}

export default MyTable;