Estoy usando React Table en mi proyecto de tablero. Quiero cambiar el nombre del encabezado de la columna React Table en cada clic de pestaña. Paso el estado del nombre como accesorios en la tabla React, pero el texto del encabezado no cambia según los accesorios. ¿Es posible cambiar el encabezado de la columna dentro de él?
A continuación se muestra el código del componente de la tabla de reacción en el que tabName es el estado que paso como accesorios, que no cambia.
const BreakdownTable = ({ tabName }) => { // console.log(tabName); const data = React.useMemo( () => [ { col1: "com.gumlet.limited-videoPlay", col2: "100", col3: "1.3k", }, ], [] ); const columns = React.useMemo( () => [ { Header: tabName, accessor: "col1", }, { Header: "Unique Views", accessor: "col2", }, { Header: "Total Views", accessor: "col3", }, ], [] ); const { getTableProps, getTableBodyProps, headerGroups, // rows, prepareRow, page, canPreviousPage, canNextPage, pageOptions, // pageCount, gotoPage, nextPage, // previousPage, setPageSize, pageSize, state, setGlobalFilter, } = useTable( { columns, data, initialState: { pageSize: 15 }, }, useGlobalFilter, useSortBy, usePagination ); const { globalFilter } = state;
¿Puedes intentar hacer una columna como esta, una simple matriz de javascript? Esto ayudará a determinar si el problema se debe a la función useMemo.
const columns = [ { Header: tabName, accessor: "col1", }, { Header: "Unique Views", accessor: "col2", }, { Header: "Total Views", accessor: "col3", }, ]