Tengo una matriz de objetos y necesito convertir eso en formato de columnas de tabla antd. Aquí está el enlace del editor en línea .
const a = [ { id: 1, startValue: 1, endValue: 3, box: "ele", }, { id: 2, startValue: 3, endValue: 5, box: "vcu", }, { id: 3, startValue: 2, endValue: 6, box: "mcu", }, ] // output // [ // { // dataindex: id, // key: id, // title: id, // }, // { // dataindex: startValue, // key: startValue, // title: startValue, // }, // { // dataindex: endValue, // key: endValue, // title: endValue, // }, // { // dataindex: box, // key: box, // title: box, // }, // ]Hay poco que hacer para lograr lo que quieres. De acuerdo con la documentación de Ant Design, no es necesario convertir sus datos en output . Se puede usar directamente como dataSource de origen de datos. Y deberá proporcionar la matriz de columns como se muestra a continuación:
const dataSource = [ { id: 1, startValue: 1, endValue: 3, box: "ele", }, { id: 2, startValue: 3, endValue: 5, box: "vcu", }, { id: 3, startValue: 2, endValue: 6, box: "mcu", } ]; const columns= [ { dataindex: "id", key: "id", title: "Id" }, { dataindex: "startValue", key: "startValue", title: "Start value" }, { dataindex: "endValue", key: "endValue", title: "End value" }, { dataindex: "box", key: "box", title: "Box" } ]; // the following JSX expression will create the ant table in a React environment: <Table dataSource={dataSource} columns={columns} />; Con la matriz de columns , define qué propiedad de los elementos de dataSource de datos desea mostrar en la tabla. La propiedad de title define el título que se mostrará en cada encabezado de columna.
Según lo que proporcionó, supongo que está tratando de extraer automáticamente los nombres de las columnas de la fuente de datos dada. Esto es lo que está buscando (reutilicé la variable llamada a :
const columns = Object.keys(a[0]||{}) .map(key => ({dataIndex: key, key, title: key})); <Table dataSource={a} columns={columns} />