Trying to add Fixed Columns to a React Table. Using React-Table and React-Table-Hoc-Fixed-Columns, to make the Left & Right-most columns fixed. I’ve added it according to the CodeSandBox demo example linked to the GitHub Repo. It looks straight forward, but something is off. None of the columns are fixed. The top 2 rows slide left… Read More Fixed React Table Columns Aren't Sliding Properly – React, React Table, React-Table-Hoc-Fixed-Columns

This is more of an issue with how I’m doing my fetch and I understand that, it’s just that this is specifically happening with react table. I have the following code which saves new data, then changes the state of a boolean which then triggers a re-fetch ultimately updating the data which my React-Table looks… Read More React-Table not updating to data change

How can I display two values e.g. name and price? In the code below, only the price is displayed: { Header: ‘Price’, accessor: (row) => row.price, Cell: (props) => ({ props.value !== [] ? props.value.map(({ name, price }) => (name && price)).join(", ") : ” }) ) }, >Solution : props.value.map(({ name, price }) =>… Read More Displaying two values but only the last one is displayed

I am getting data from an API and it does not have proper key values and headers to use react-table. I am not sure how to generate table with the data { "result": { "DB04571": { "CC1=CC2": -4.204354763031006 }, "DB00855": { "NCC(=O)": -3.666783332824707 }, "DB09536": { "O=[Ti]": -3.1173958778381348 } }} The above is a sample… Read More Making a table in react js without proper key values in json data

I would like to know it’s necessary to use useMemo in react table for columns and data if yes why it’s so? This is my code: import React, { useMemo } from "react"; import useData from "../../hooks/useData"; import Table from "./Table"; import Loader from "../../assets/imgs/loader.svg"; const TableSection = React.memo(({ query, isOpen }) => { const… Read More Is it necessary to use useMemo in react table?

Is it possible to add if/else logic in the iteration as I would like to add different class names depending on the value of paymentType? This is used inside react-table. I’m unsure what the syntax is. const PaymentTypes = ({ values }) => { // Iterate the array and create a badge-like component return (… Read More if/else statements inside a function for react-table

Having trouble with styling table created by react-table library. Please find the design below. Table is created the way it is shown in documentation. Is it possible to colour headers as shown in design? Thank you in advance P.S. Here is the code snippet from documentation To create headers I need to create an array.… Read More Different colour for react-table headers