Estudio de Ant Design

• Conjunto de componentes de alta calidad
• Consistencia de diseño
• Amplio conjunto de herramientas

• Interfaces ricas y atractivas
• Apps web basadas en React
• Consistencia de diseño elevada

Instalación: npm i antd

import { Button } from 'antd';
export default () => <Button type="primary">Hola Ant</Button>;

1. Tabla con datos

Tabla con columnas y datos desde un array.

import { Table } from 'antd';

const columnas = [
  { title: 'Nombre', dataIndex: 'nombre' },
  { title: 'Edad', dataIndex: 'edad' },
];
const datos = [{ key: 1, nombre: 'Ana', edad: 28 }, { key: 2, nombre: 'Luis', edad: 34 }];

export default () => <Table columns={columnas} dataSource={datos} />;

2. Formulario con validación

Formulario que valida campos y muestra errores.

import { Form, Input, Button } from 'antd';

export default () => (
  <Form onFinish={(v) => console.log(v)}>
    <Form.Item name="email" label="Email" rules={[{ required: true, message: 'Falta el email' }]}>
      <Input placeholder="tú@correo.com" />
    </Form.Item>
    <Button htmlType="submit" type="primary">Enviar</Button>
  </Form>
);