26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow

React Table Column Header Data

Asked 6 years, 11 months ago Modified today Viewed 16k times

I am trying to create a Jeopardy app using React and React Table and I am stuck. I am trying
to get the column headers to get filled in with the actual name of the category from the
3 jeopardy API. The object fetched from the API looks like this:
"id": 11111,
"title": "papers",
"clues_count": 5,
"clues":

where the title is the name of the category. That request is made 6 times, once for each
column. Right now I have "category x" hardcoded as the value of the header for each column.
I can't figure out how to get the title as the column header. My code is below (I know it's
messy and needs refactoring, but I've only been coding for like 6 weeks so please be patient):
Column component:
import React, { Component } from 'react';
import axios from 'axios';
const CAT_NUM = function () {
return Math.floor(Math.random() * Math.floor(18418));
}

const URL = `http://jservice.io/api/category?id=`

class Column extends Component {

constructor(props) {
super()

this.state = {
category: '',
clues: []
}

this.colRef = React.createRef();
}

getClues = function () {
let self = this;

const category = CAT_NUM();

const clueUrl = URL + category;

const request = axios.get(clueUrl)

.then(function (response) {

//fetch the category title

const categoryTitle = response.data.title;

https://stackoverflow.com/questions/52107707/react-table-column-header-data 1/6
26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow
//get an array of all the clues for this category
const clueArray = response.data.clues;

//grab the first five clues -- could be modified to grab a random five,
but there are 18418 categories...
const fiveClues = clueArray.slice(0, 5);=

//set state to contain category, five clues

self.setState({
category: categoryTitle.toUpperCase(),
clues: fiveClues
})

if (self.props.hasOwnProperty('addColumnData')) {
self.props.addColumnData(self.state);
}

//check the state

});
}

render () {
{if (this.state.clues.length === 0) {
this.getClues();
return (
<div>Loading...</div>
)
}
}

return (
<div ref={this.colRef} />
);
}
}

export default Column

App component:
import React, { Component } from 'react';
import Board from './components/Board.js';
import Column from './components/Column.js';
import ReactTable from "react-table";

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import "react-table/react-table.css";
import "./index.css";

class App extends Component {

constructor() {
super()

this.state = {hasData:false};

this.columnData = [];

this.addColumnData = this.addColumnData.bind(this);

https://stackoverflow.com/questions/52107707/react-table-column-header-data 2/6
26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow
this.renderColumns = this.renderColumns.bind(this);

}
//Create each column with dollar amounts
columns = [
{
Header: 'Category 1',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
},
{
Header: 'Category 2',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
},
{
Header: 'Category 3',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
},
{
Header: 'Category 4',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
},
{
Header: 'Category 5',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
},
{
Header: 'Category 6',
accessor: 'value',
style: {
borderRadius: "5px",
borderColor: "black"
}
}
]
renderColumns () {
let columnArray = [];
console.log('render columns fn sees: ', this);
for (let i=0; i<6; i++) {
columnArray.push(
<Column addColumnData={this.addColumnData} key={i}/>
)
}

https://stackoverflow.com/questions/52107707/react-table-column-header-data 3/6
26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow
console.log(this.columnData)
// const question = this.columnData[0].clues[0].question;
// console.log(question)
return columnArray;
}

addColumnData (object) {
this.columnData.push(object)
if (this.columnData.length === 6) {
this.setState({columnData: this.columnData, hasData: true})
}
// console.log('columnData contains: ', this.columnData)
// return this.columnData
}

render() {
const getTdProps = (state, rowInfo, column, instance) => {
return {
onClick: (e, handleOriginal) => {
console.log('You clicked: ', column.Header, rowInfo.original.value)
}
}
}

if(!this.state.hasData) {
return (
<div>
{this.renderColumns()}
</div>
)
}
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Project (in) Jeopardy</h1>
</header>
<Column />
<div className="container">
<div className="row">
<div className="col-md-2">
<div className="score">
Player 1 Score: {}
</div>
</div>
<div className="col-md-8" id="table">
<ReactTable
style={{
height:"500px",
textAlign:"center",
backgroundColor: "#060CE9",
borderRadius: "5px",
borderColor: "#000000",
color: "#FFCC00",
fontSize: "20",
verticalAlign: "middle"
}}
data={this.state.columnData[0].clues}
columns={this.columns}
defaultPageSize = {5}
sortable={false}

https://stackoverflow.com/questions/52107707/react-table-column-header-data 4/6
26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow
showPagination={false}
showPageSizeOptions={false}
getTdProps={getTdProps}
/>
</div>
<div className="col-md-2">
<button type="button" className="btn btn-primary">Restart</button>
</div>
</div>
</div>
</div>
);
}
}

export default App;

I will understand if no one gets around to this since I posted a bunch of code. I'm sorry I'm
really new at all of this.
javascript reactjs react-table

Share Edit Follow Flag edited Oct 26, 2021 at 13:39 asked Aug 31, 2018 at 2:33
Moinul Robin GohanSolo
36 1 10 56 1 1 6

1 Answer Sorted by: Highest score (default)

Have you tried

Vote `Header : `${title}`

where the "`" character is the back-tic (on my Mac its the key just below the esc key) and title
is the variable holding the database (or json) value for title.
Share Edit Follow Flag answered Nov 15, 2019 at 18:28
chasahodge
443 1 5 12
Comments
Add a comment

https://stackoverflow.com/questions/52107707/react-table-column-header-data 5/6
26/07/2025, 22:55 javascript - React Table Column Header Data - Stack Overflow

Start asking to get answers

Find the answer to your question by asking.
Ask question

Explore related questions

javascript reactjs react-table
See similar questions with these tags.

https://stackoverflow.com/questions/52107707/react-table-column-header-data 6/6