Questions tagged [react-table]
React Table is a versatile and efficient data table designed specifically for React applications.
I am attempting to incorporate the React Table library from into a Vue.js application using https://github.com/akxcv/vuera. This is my main.js: import Vue from 'vue' import { VuePlugin } from 'vuera' import App from './App' import router from './route ...
I've been experimenting with the react-table library and my goal is to create editable cells that only show an input box for editing when clicked. Unfortunately, I'm running into an issue where the input box appears constantly instead of just on click. If ...
How can I customize the appearance of Material's UI table header? Perhaps by adding classes using useStyle. <TableHead > <TableRow > <TableCell hover>Dessert (100g serving)</TableCell> ...
Does anyone know how to utilize rowSpan in a react table? In the example below, the usernameFormatter displays multiple values. Please note that the attached picture is just a reference for what I am trying to achieve. const columns = [ { acc ...
Experiencing unexpected results with react-table integration for pagination and sorting. Merged examples from the react-table repository. Encountering an issue where table hooks reset the page index on re-render, causing fetchData to be called twice during ...
Visit Codesandbox to view Table While the header appears correctly, I noticed something strange. When I console log the data props, it shows all the necessary data. However, when I try to console.log row, there doesn't seem to be any single object related ...
I'm currently working on a table that pulls data from an API and presents it in either an MUI table or Material table. I would like to have different action buttons displayed for each row - for example, in the first row, the button should read "connec ...
Is there a way to display the filter option only for specific columns, such as First Name, without it appearing on other columns like Id, Last Name, and Full Name? https://i.stack.imgur.com/HdBcp.png import React, { useEffect, useState } from "react& ...
import React, {Component} from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from & ...
I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...
const data = { name:"test1", fclPrice:100, lclPrice:null, total:"50" } and here are the two columns: const Datatable = [ { Header: 'Name', accessor: 'name' }, { Header: 'Price', ac ...
In my React application, I have 3 components. The parent component and two child components named EziSchedule and EziTransaction. Each component fetches its own data from an API. The data to display in the EziTransaction child component depends on the reco ...
I am facing an issue with my react-table where real-time notifications received from an event-source are not being reflected in the table after data refresh. https://i.stack.imgur.com/q4vLL.png The first screenshot shows the initial data retrieval from th ...
I have a column titled 'EV/Resource ($ per oz)' that appears to not sort correctly in my react table. Instead of sorting in ascending or descending order, it randomizes the table sort. I'm unsure if I am handling this as a "calculated column ...
In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...
After following the example at while using react-table, everything worked as expected. However, when attempting to use my own data, I encountered an issue where I kept receiving a TypeError stating that 'data is undefined' in useTable. Even though my arra ...
I have managed to successfully apply a classname and add color to a specific row in my react-table. However, I am facing difficulty in adding a hover rule to this className to change the color when I hover over the row. Can someone guide me on how to apply ...