Tabla
Se utilizan para mostrar datos tabulares mediante filas y columnas. Permiten a los usuarios explorar, ordenar, comparar y actuar rápidamente sobre grandes cantidades de datos.
| Nombre | Rol | Estatus |
|---|---|---|
| Antoni Martínez | Director tecnologia | Activo |
| Jose Tomas | Frontend Developer | Vacaciones |
| Juan David | Frontend Developer | Baja |
| Alex | Design Enginner & Frontend Developer | Vacaciones |
Filas rayadas
Utiliza la propiedad striped para representar filas rayadas.
| Nombre | Rol | Estatus |
|---|---|---|
| Antoni Martínez | Director tecnologia | Activo |
| Jesus Montoro | Gerente Tecnologia | Activo |
| Juan David | Frontend Developer | Baja |
| Alex | UI developer & Design Systems Enginner | Vacaciones |
Selección de una sola fila
Es posible hacer que las filas de la tabla sean seleccionables. Utiliza la propiedad selectionMode="single".
| Nombre | Rol | Estatus | |
|---|---|---|---|
| Antoni Martínez | Director tecnologia | Activo | |
| Jesus Montoro | Gerente Tecnologia | Activo | |
| Jose Tomas | Frontend Developer | Vacaciones | |
| Alex | UI developer & Design Systems Enginner | Vacaciones |
Selección de varias filas
Puedes seleccionar varias filas utilizando la propiedad selectionMode="multiple".
| Nombre | Rol | Estatus | |
|---|---|---|---|
| Antoni Martínez | Director tecnologia | Activo | |
| Jesus Montoro | Gerente Tecnologia | Activo | |
| Jose Tomas | Frontend Developer | Vacaciones | |
| Alex | UI developer & Design Systems Enginner | Vacaciones |
Selección controlada
Para controlar la selección de filas, utiliza la propiedad selectedRows en conjunto con la devolución de llamada onChangeSelectedRows.
La propiedad key de las filas(rows) seleccionadas se pasará a la devolución de llamada cuando se pulse la fila.
| Nombre | Rol | Estatus | |
|---|---|---|---|
| Antoni Martínez | Director tecnologia | Activo | |
| Jesus Montoro | Gerente Tecnologia | Activo | |
| Jose Tomas | Frontend Developer | Vacaciones | |
| Alex | UI developer & Design Systems Enginner | Vacaciones |
Filas seleccionadas: []
Fila seleccionada: ""
Deshabilitar filas
Utiliza la propiedad disabledRows para especificar las keys de las filas que deberan estar inhabilitadas.
DisabledRowsnDemo
| Nombre | Rol | Estatus | |
|---|---|---|---|
| Antoni Martínez | Director tecnologia | Activo | |
| Jose Tomas | Frontend Developer | Vacaciones | |
| Alex | UI developer & Design Systems Enginner | Vacaciones |
Modo compacto
| Nombre | Rol | Estatus | |
|---|---|---|---|
Antoni Martínez | Director tecnologia | Activo | |
Jose Tomas | Frontend Developer | Vacaciones | |
Juan David | Frontend Developer | Baja | |
Alex | Design Enginner & Frontend Developer | Vacaciones |
Props
Table
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
columns | { key: string, label: string }[] | - | Una lista de columnas de la cabecera en la tabla. |
rows | { key: string, [prop: string]: any }[] | - | Una lista de objetos de fila en el cuerpo de la tabla que se utiliza para representar filas |
selectionMode | 'single' | 'multiple' | undefined | - | El tipo de selecciona permitido |
selectedRows | string[] | - | Las claves de las filas seleccionadas(controlado) |
defaultSelectedRows | string[] | - | Las claves seleccionadas inicialmente (sin controlar). |
disabledRows | string[] | - | Las claves de las filas deshabilitadas |
onChangeSelectedRows | (rowsKeys: string[]) => void | - | Controlador que se llama cuando cambia la selección de filas |
onSelectRow | (rowKey: string) => void | - | Controlador que se llama cuando seleccionas una fila |
compact | boolean | - | variante de estilo mas compacta y menos relleno en las celdas |
Table row
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
rowKey | string | - | Una clave unica que identifica una fila |