DataGrid

Tabla avanzada con edición inline, selección de filas, visibilidad de columnas y exportación CSV. Para cuando necesitas más que un DataTable simple.

pnpm dlx nuvo-ui add data-grid

Demo completo

Haz click en una celda editable (Nombre, Email, Rol) para editar inline. Selecciona filas con el checkbox.

	Nombre	Email	Rol	Score	Estado
					Activo
					Activo
					Inactivo
					Activo

Página 1 de 2

const [data, setData] = React.useState(initialUsers)

<DataGrid
  data={data}
  columns={[
    { key: "name",  label: "Nombre", sortable: true, editable: true },
    { key: "email", label: "Email",  sortable: true, editable: true },
    { key: "role",  label: "Rol",    editable: true,
      type: "select", options: ["Admin", "Editor", "Viewer"] },
    { key: "status", label: "Estado",
      render: (v) => <Badge variant={v === "active" ? "success" : "muted"}>{v}</Badge> },
  ]}
  idKey="id"
  selectable
  searchable
  exportable
  paginate
  pageSize={10}
  onCellEdit={(id, key, value) => {
    setData(prev => prev.map(r => r.id === id ? { ...r, [key]: value } : r))
  }}
  onRowSelect={(rows) => setSelected(rows)}
/>

Nota: Las celdas con editable: true muestran un cursor pointer. Click para editar, Enter para confirmar, Escape para cancelar.

Diferencias con DataTable

Feature	DataTable	DataGrid
API de 3 capas (JSON/render/compound)	✓	✗
Edición inline de celdas	✗	✓
Selección de filas con checkbox	✗	✓
Visibilidad de columnas	✗	✓
Exportar CSV	✗	✓
Sorting, búsqueda, paginación	✓	✓
Skeleton de carga	✓	✓

Props

Prop	Tipo	Default	Descripción
data	T[]	—	Array de datos
columns	DataGridColumnDef<T>[]	—	Definición de columnas
idKey	string	"id"	Campo que identifica cada fila
selectable	boolean	false	Habilita columna de checkboxes
searchable	boolean	false	Barra de búsqueda global
exportable	boolean	false	Botón de exportar CSV
paginate	boolean	false	Controles de paginación
onCellEdit	(id, key, value) => void	—	Callback al editar una celda
onRowSelect	(rows: T[]) => void	—	Callback al seleccionar filas