Estoy tratando de crear una tabla a partir de una reacción de diseño de hormigas. He copiado un ejemplo, pero cuando intento ejecutarlo, el resultado no es el esperado. Aunque estoy usando el mismo código, ¿alguien puede decirme cuál es el problema?

 const columns = [ { title: 'Name', dataIndex: 'name', filters: [ { text: 'Joe', value: 'Joe', }, { text: 'Category 1', value: 'Category 1', children: [ { text: 'Yellow', value: 'Yellow', }, { text: 'Pink', value: 'Pink', }, ], }, { text: 'Category 2', value: 'Category 2', children: [ { text: 'Green', value: 'Green', }, { text: 'Black', value: 'Black', }, ], }, ], filterMode: 'tree', filterSearch: true, onFilter: (value, record) => record.name.includes(value), width: '30%', }, { title: 'Age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], onFilter: (value, record) => record.address.startsWith(value), filterSearch: true, width: '40%', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; const onChange = (pagination, filters, sorter, extra) => { console.log('params', pagination, filters, sorter, extra); }; const DataTable = () =>{ return( <div className='data-table'> <Table columns={columns} dataSource={data} onChange={onChange} bordered/> </div> ); }; export default DataTable;

Se suponía que la mesa era: ingrese la descripción de la imagen aquí

Pero el resultado es: ingrese la descripción de la imagen aquí

Usé el mismo código, ingresé los mismos componentes. No puedo entender cuál es el problema.