Skip to main content

APIs de la Tabla

useReactTable / createSolidTable / useQwikTable / useVueTable / createSvelteTable​

type useReactTable = <TData extends AnyData>(
  options: TableOptions<TData>,
) => Table<TData>;

Estas funciones se utilizan para crear una tabla. Cuál usar depende del adaptador de framework que estés utilizando.

Opciones​

Estas son opciones centrales y propiedades de la API para la tabla. Hay más opciones y propiedades de la API disponibles para otras características de la tabla.

data​

data: TData[]

Los datos que la tabla debe mostrar. Este array debe coincidir con el tipo que proporcionaste a table.setRowType<...>, pero en teoría podría ser un array de cualquier cosa. Es común que cada elemento del array sea un objeto de clave/valor, pero esto no es un requisito. Las columnas pueden acceder a estos datos a través de una cadena/índice o un accesor funcional para devolver lo que deseen.

Cuando la opción data cambia de referencia (comparado a través de Object.is), la tabla volverá a procesar los datos. Cualquier otro procesamiento de datos que dependa del modelo de datos central (como agrupación, ordenación, filtrado, etc.) también será reprocesado.

🧠 Asegúrate de que tu opción data solo cambie cuando quieras que la tabla se reprocese. Proporcionar un [] en línea o construir el array de datos como un nuevo objeto cada vez que quieras renderizar la tabla resultará en mucho reprocesamiento innecesario. Esto puede pasar desapercibido fácilmente en tablas pequeñas, pero probablemente lo notarás en tablas más grandes.

columns​

type columns = ColumnDef<TData>[];

El array de definiciones de columna a utilizar para la tabla. Consulta la Guía de Definiciones de Columna para obtener más información sobre cómo crear definiciones de columna.

defaultColumn​

defaultColumn?: Partial<ColumnDef<TData>>

Opciones de columna predeterminadas para todas las definiciones de columna proporcionadas a la tabla. Esto es útil para proporcionar renderizadores de celda/encabezado/pie de página predeterminados, opciones de ordenación/filtrado/agrupación, etc. Todas las definiciones de columna pasadas a options.columns se fusionan con esta definición de columna predeterminada para producir las definiciones de columna finales.

initialState​

initialState?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>

Usa esta opción para pasar opcionalmente un estado inicial a la tabla. Este estado se utilizará al restablecer varios estados de la tabla, ya sea automáticamente por la tabla (por ejemplo, options.autoResetPageIndex) o a través de funciones como table.resetRowSelection(). La mayoría de las funciones de restablecimiento permiten pasar opcionalmente una bandera para restablecer a un estado en blanco/predeterminado en lugar del estado inicial.

🧠 El estado de la tabla no se restablecerá cuando este objeto cambie, lo que también significa que el objeto de estado inicial no necesita ser estable.

autoResetAll​

autoResetAll?: boolean

Establece esta opción para anular cualquiera de las opciones de características autoReset....

meta​

meta?: TableMeta // Esta interfaz es extensible a través de la fusión de declaraciones. ¡Ver más abajo!

Puedes pasar cualquier objeto a options.meta y acceder a él en cualquier lugar donde la table esté disponible a través de table.options.meta. Este tipo es global para todas las tablas y puede extenderse de la siguiente manera:

declare module "@tanstack/table-core" {
  interface TableMeta<TData extends RowData> {
    foo: string;
  }
}

🧠 Piensa en esta opción como un "contexto" arbitrario para tu tabla. Esta es una excelente manera de pasar datos o funciones arbitrarias a tu tabla sin tener que pasarlas a cada elemento que la tabla toca. Un buen ejemplo es pasar un objeto de localización a tu tabla para usarlo en el formato de fechas, números, etc., o incluso una función que se pueda usar para actualizar datos editables como en el ejemplo editable-data.

state​

state?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>

La opción state se puede usar para controlar opcionalmente parte o todo el estado de la tabla. El estado que pases aquí se fusionará y sobrescribirá el estado interno gestionado automáticamente para producir el estado final de la tabla. También puedes escuchar los cambios de estado a través de la opción onStateChange.

onStateChange​

onStateChange: (updater: Updater<TableState>) => void

La opción onStateChange se puede usar para escuchar opcionalmente los cambios de estado dentro de la tabla. Si proporcionas esta opción, serás responsable de controlar y actualizar el estado de la tabla tú mismo. Puedes devolver el estado a la tabla con la opción state.

debugAll​

⚠️ La depuración solo está disponible en modo de desarrollo.

debugAll?: boolean

Establece esta opción en true para mostrar toda la información de depuración en la consola.

debugTable​

⚠️ La depuración solo está disponible en modo de desarrollo.

debugTable?: boolean

Establece esta opción en true para mostrar la información de depuración de la tabla en la consola.

debugHeaders​

⚠️ La depuración solo está disponible en modo de desarrollo.

debugHeaders?: boolean

Establece esta opción en true para mostrar la información de depuración de encabezados en la consola.

debugColumns​

⚠️ La depuración solo está disponible en modo de desarrollo.

debugColumns?: boolean

Establece esta opción en true para mostrar la información de depuración de columnas en la consola.

debugRows​

⚠️ La depuración solo está disponible en modo de desarrollo.

debugRows?: boolean

Establece esta opción en true para mostrar la información de depuración de filas en la consola.

_features​

_features?: TableFeature[]

Un array de características adicionales que puedes añadir a la instancia de la tabla.

render​

⚠️ Esta opción solo es necesaria si estás implementando un adaptador de tabla.

type render = <TProps>(template: Renderable<TProps>, props: TProps) => any;

La opción render proporciona una implementación de renderizado para la tabla. Esta implementación se utiliza para transformar las diversas plantillas de encabezado y celda de columna de una tabla en un resultado compatible con el framework del usuario.

mergeOptions​

⚠️ Esta opción solo es necesaria si estás implementando un adaptador de tabla.

type mergeOptions = <T>(defaultOptions: T, options: Partial<T>) => T;

Esta opción se utiliza para implementar opcionalmente la fusión de opciones de tabla. Algunos frameworks como Solid.js utilizan proxies para rastrear la reactividad y el uso, por lo que la fusión de objetos reactivos debe manejarse con cuidado. Esta opción invierte el control de este proceso al adaptador.

getCoreRowModel​

getCoreRowModel: (table: Table<TData>) => () => RowModel<TData>;

Esta opción requerida es una factoría para una función que calcula y devuelve el modelo de fila central para la tabla. Se llama una vez por tabla y debe devolver una nueva función que calculará y devolverá el modelo de fila para la tabla.

Una implementación predeterminada se proporciona a través de la exportación { getCoreRowModel } de cualquier adaptador de tabla.

getSubRows​

getSubRows?: (
  originalRow: TData,
  index: number
) => undefined | TData[]

Esta función opcional se utiliza para acceder a las subfilas de cualquier fila dada. Si estás utilizando filas anidadas, necesitarás usar esta función para devolver el objeto de subfilas (o undefined) de la fila.

getRowId​

getRowId?: (
  originalRow: TData,
  index: number,
  parent?: Row<TData>
) => string

Esta función opcional se utiliza para derivar un ID único para cualquier fila dada. Si no se proporciona, se utiliza el índice de la fila (las filas anidadas se unen con . usando el índice de sus abuelos, por ejemplo, index.index.index). Si necesitas identificar filas individuales que se originan de operaciones del lado del servidor, se sugiere que uses esta función para devolver un ID que tenga sentido independientemente de la E/S de red/ambigüedad, por ejemplo, un userId, taskId, campo de ID de base de datos, etc.

API de la Tabla​

Estas propiedades y métodos están disponibles en el objeto table:

initialState​

initialState: VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState;

Este es el estado inicial resuelto de la tabla.

reset​

reset: () => void

Llama a esta función para restablecer el estado de la tabla al estado inicial.

getState​

getState: () => TableState;

Llama a esta función para obtener el estado actual de la tabla. Se recomienda usar esta función y su estado, especialmente al gestionar el estado de la tabla manualmente. Es exactamente el mismo estado utilizado internamente por la tabla para cada característica y función que proporciona.

🧠 El estado devuelto por esta función es el resultado de la fusión superficial del estado interno de la tabla gestionado automáticamente y cualquier estado gestionado manualmente pasado a través de options.state.

setState​

setState: (updater: Updater<TableState>) => void

Llama a esta función para actualizar el estado de la tabla. Se recomienda pasar una función de actualización en la forma de (prevState) => newState para actualizar el estado, pero también se puede pasar un objeto directo.

🧠 Si se proporciona options.onStateChange, será activada por esta función con el nuevo estado.

options​

options: TableOptions<TData>;

Una referencia de solo lectura a las opciones actuales de la tabla.

⚠️ Esta propiedad se usa generalmente de forma interna o por adaptadores. Se puede actualizar pasando nuevas opciones a tu tabla. Esto es diferente para cada adaptador. Para los propios adaptadores, las opciones de la tabla deben actualizarse a través de la función setOptions.

setOptions​

setOptions: (newOptions: Updater<TableOptions<TData>>) => void

⚠️ Esta función es utilizada generalmente por los adaptadores para actualizar las opciones de la tabla. Se puede usar para actualizar las opciones de la tabla directamente, pero generalmente no se recomienda omitir la estrategia de tu adaptador para actualizar las opciones de la tabla.

getCoreRowModel​

getCoreRowModel: () => {
  rows: Row<TData>[],
  flatRows: Row<TData>[],
  rowsById: Record<string, Row<TData>>,
}

Devuelve el modelo de fila central antes de que se haya aplicado cualquier procesamiento.

getRowModel​

getRowModel: () => {
  rows: Row<TData>[],
  flatRows: Row<TData>[],
  rowsById: Record<string, Row<TData>>,
}

Devuelve el modelo final después de que se haya aplicado todo el procesamiento de otras características utilizadas.

getAllColumns​

type getAllColumns = () => Column<TData>[];

Devuelve todas las columnas de la tabla en su jerarquía normalizada y anidada, reflejada a partir de las definiciones de columna pasadas a la tabla.

getAllFlatColumns​

type getAllFlatColumns = () => Column<TData>[];

Devuelve todas las columnas de la tabla aplanadas a un solo nivel. Esto incluye objetos de columnas padre en toda la jerarquía.

getAllLeafColumns​

type getAllLeafColumns = () => Column<TData>[];

Devuelve todas las columnas de nodo hoja de la tabla aplanadas a un solo nivel. Esto no incluye columnas padre.

getColumn​

type getColumn = (id: string) => Column<TData> | undefined;

Devuelve una única columna por su ID.

getHeaderGroups​

type getHeaderGroups = () => HeaderGroup<TData>[];

Devuelve los grupos de encabezado de la tabla.

getFooterGroups​

type getFooterGroups = () => HeaderGroup<TData>[];

Devuelve los grupos de pie de página de la tabla.

getFlatHeaders​

type getFlatHeaders = () => Header<TData>[];

Devuelve un array aplanado de objetos Header para la tabla, incluyendo los encabezados padre.

getLeafHeaders​

type getLeafHeaders = () => Header<TData>[];

Devuelve un array aplanado de objetos Header de nodo hoja para la tabla.