Guía de Selección de Filas
Ejemplos
¿Quieres ir directamente a la implementación? Echa un vistazo a estos ejemplos:
API
Guía de Selección de Filas
La funcionalidad de selección de filas rastrea qué filas están seleccionadas y te permite alternar la selección de filas de una multitud de maneras. Echemos un vistazo a algunos casos de uso comunes.
Acceder al Estado de Selección de Filas
La instancia de la tabla ya gestiona el estado de selección de filas por ti (aunque como se verá más adelante, puede ser más conveniente gestionar el estado de selección de filas en tu propio ámbito). Puedes acceder al estado interno de selección de filas o a las filas seleccionadas desde algunas APIs.
getState().rowSelection- devuelve el estado interno de selección de filasgetSelectedRowModel()- devuelve las filas seleccionadasgetFilteredSelectedRowModel()- devuelve las filas seleccionadas después de filtrargetGroupedSelectedRowModel()- devuelve las filas seleccionadas después de agrupar y ordenar
console.log(table.getState().rowSelection); //obtener el estado de selección de filas - { 1: true, 2: false, etc... }
console.log(table.getSelectedRowModel().rows); //obtener todas las filas seleccionadas del lado del cliente
console.log(table.getFilteredSelectedRowModel().rows); //obtener las filas seleccionadas del lado del cliente después de filtrar
console.log(table.getGroupedSelectedRowModel().rows); //obtener las filas seleccionadas del lado del cliente después de agrupar
Nota: Si estás utilizando
manualPagination, ten en cuenta que la APIgetSelectedRowModelsolo devolverá las filas seleccionadas en la página actual porque los modelos de filas de la tabla solo pueden generar filas basándose en losdataque se pasan. Sin embargo, el estado de selección de filas puede contener IDs de filas que no están presentes en el arraydatasin problemas.
Gestionar el Estado de Selección de Filas
Aunque la instancia de la tabla ya gestionará el estado de selección de filas por ti, generalmente es más conveniente gestionar el estado tú mismo para tener fácil acceso a los IDs de filas seleccionadas que puedes usar para realizar llamadas a la API u otras acciones.
Usa la opción de tabla onRowSelectionChange para elevar el estado de selección de filas a tu propio ámbito. Luego, pasa el estado de selección de filas de vuelta a la instancia de la tabla usando la opción de tabla state.
const [rowSelection, setRowSelection] = useState<RowSelectionState>({}); //gestiona tu propio estado de selección de filas
const table = useReactTable({
//...
onRowSelectionChange: setRowSelection, //elevar el estado de selección de filas a tu propio ámbito
state: {
rowSelection, //pasar el estado de selección de filas de vuelta a la instancia de la tabla
},
});
IDs de Fila Útiles
Por defecto, el ID de fila para cada fila es simplemente row.index. Si estás utilizando funcionalidades de selección de filas, lo más probable es que quieras usar un identificador de fila más útil, ya que el estado de selección de filas se indexa por el ID de fila. Puedes usar la opción de tabla getRowId para especificar una función que devuelva un ID de fila único para cada fila.
const table = useReactTable({
//...
getRowId: (row) => row.uuid, //usar el uuid de la fila de tu base de datos como ID de fila
});
Ahora, a medida que se seleccionan filas, el estado de selección de filas se verá algo así:
{
"13e79140-62a8-4f9c-b087-5da737903b76": true,
"f3e2a5c0-5b7a-4d8a-9a5c-9c9b8a8e5f7e": false
//...
}
en lugar de esto:
{
"0": true,
"1": false
//...
}
Habilitar la Selección de Filas Condicionalmente
La selección de filas está habilitada por defecto para todas las filas. Para habilitar la selección de filas condicionalmente para ciertas filas o deshabilitarla para todas las filas, puedes usar la opción de tabla enableRowSelection, que acepta un booleano o una función para un control más granular.
const table = useReactTable({
//...
enableRowSelection: (row) => row.original.age > 18, //solo habilitar la selección de filas para adultos
});
Para hacer cumplir si una fila es seleccionable o no en tu UI, puedes usar la API row.getCanSelect() para tus casillas de verificación u otra interfaz de selección.
Selección de Una Sola Fila
Por defecto, la tabla permite seleccionar múltiples filas a la vez. Sin embargo, si solo quieres permitir la selección de una sola fila a la vez, puedes establecer la opción de tabla enableMultiRowSelection en false para deshabilitar la selección de múltiples filas, o pasar una función para deshabilitar la selección de múltiples filas condicionalmente para las sub-filas de una fila.
Esto es útil para crear tablas que tienen botones de radio en lugar de casillas de verificación.
const table = useReactTable({
//...
enableMultiRowSelection: false, //solo permitir la selección de una sola fila a la vez
// enableMultiRowSelection: row => row.original.age > 18, //solo permitir la selección de una sola fila a la vez para adultos
});
Selección de Sub-Filas
Por defecto, seleccionar una fila padre seleccionará todas sus sub-filas. Si quieres deshabilitar la selección automática de sub-filas, puedes establecer la opción de tabla enableSubRowSelection en false para deshabilitar la selección de sub-filas, o pasar una función para deshabilitar la selección de sub-filas condicionalmente para las sub-filas de una fila.
const table = useReactTable({
//...
enableSubRowSelection: false, //deshabilitar la selección de sub-filas
// enableSubRowSelection: row => row.original.age > 18, //deshabilitar la selección de sub-filas para adultos
});
Renderizar la UI de Selección de Filas
TanStack table no dicta cómo debes renderizar tu UI de selección de filas. Puedes usar casillas de verificación, botones de radio o simplemente conectar eventos de clic a la propia fila. La instancia de la tabla proporciona algunas APIs para ayudarte a renderizar tu UI de selección de filas.
Conectar las APIs de Selección de Filas a Entradas de Casillas de Verificación
TanStack Table proporciona algunas funciones manejadoras que puedes conectar directamente a tus entradas de casillas de verificación para facilitar la alternancia de la selección de filas. Estas funciones llaman automáticamente a otras APIs internas para actualizar el estado de selección de filas y volver a renderizar la tabla.
Usa la API row.getToggleSelectedHandler() para conectar a tus entradas de casillas de verificación y alternar la selección de una fila.
Usa las APIs table.getToggleAllRowsSelectedHandler() o table.getToggleAllPageRowsSelectedHandler para conectar a tu entrada de casilla de verificación "seleccionar todo" y alternar la selección de todas las filas.
Si necesitas un control más granular sobre estas funciones manejadoras, siempre puedes usar las APIs row.toggleSelected() o table.toggleAllRowsSelected() directamente. O incluso puedes simplemente llamar a la API table.setRowSelection() para establecer directamente el estado de selección de filas, tal como lo harías con cualquier otro actualizador de estado. Estas funciones manejadoras son solo una conveniencia.
const columns = [
{
id: "select-col",
header: ({ table }) => (
<Checkbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()} //o getToggleAllPageRowsSelectedHandler
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
onChange={row.getToggleSelectedHandler()}
/>
),
},
//... más definiciones de columna...
];
Conectar las APIs de Selección de Filas a la UI
Si quieres una UI de selección de filas más sencilla, puedes simplemente conectar eventos de clic a la propia fila. La API row.getToggleSelectedHandler() también es útil para este caso de uso.
<tbody>
{table.getRowModel().rows.map((row) => {
return (
<tr
key={row.id}
className={row.getIsSelected() ? "selected" : null}
onClick={row.getToggleSelectedHandler()}
>
{row.getVisibleCells().map((cell) => {
return <td key={cell.id}>{/* */}</td>;
})}
</tr>
);
})}
</tbody>