Tengo problemas para volver a representar las columnas de mi tabla, la biblioteca que estoy usando es un diseño de hormigas y estoy tratando de crear una función en la que reordeno la columna de la tabla a pedido.
He creado un ejemplo del problema aquí: https://replit.com/@coupacoupa/Ant-Design-column-reordering
En el ejemplo, creé un botón simple que cambia el orden de la columna que cambia un div que muestra el cambio de estado, pero en la tabla de diseño de hormigas, la columna no cambia.
A continuación se muestra un fragmento de la forma en que cambio el estado
export default ({ columnOrder, data }: IProps) => { const [orderedColumn, setOrderedColumn] = useState<ColumnsType<ISomeTableColumns>>(columns); useEffect(() => { console.log('columnOrder', columnOrder); const sortArray = columns.sort((a, b) => { return ( columnOrder.findIndex((x) => x.text === a.title) - columnOrder.findIndex((x) => x.text === b.title) ); }); if (sortArray) { setOrderedColumn(sortArray); } }, [columnOrder]); return <> <Table columns={orderedColumn} dataSource={data} bordered size="middle" scroll={{ x: 'calc(700px + 50%)' }} /> <h2>Value Of ordered Columns</h2> <div>{JSON.stringify(orderedColumn)}</div> </> };El método sort() ordena los elementos de una matriz en su lugar y devuelve la referencia a la misma matriz, ahora ordenada. Pero debe pasar una nueva matriz a setOrderedColumn para volver a procesar
useEffect(() => { console.log('columnOrder', columnOrder); columns.sort((a, b) => { return ( columnOrder.findIndex((x) => x.text === a.title) - columnOrder.findIndex((x) => x.text === b.title) ); }); if (columns) { setOrderedColumn([...columns]); } }, [columnOrder, columns]);