Some column attributes when changed slightly in the given data, will completely break the table and I have no idea why.
For context, I have a habit tracker table, where each cell contains a checkbox for a day of the week (shown below).
I switched to react-table(tanstack-table v8) from vanilla HTML tables because I wanted my table for to not completely re-render when a checkbox was modified in a cell of that table, improving speed etc.
I assumed it would be easier using a more advanced table library to implement this feature, (although now I’m seriously doubting this, and am thinking about if you can do it with just the vanilla html component somehow…)
I got the code I currently have by adapting an example from: https://tanstack.com/table/v8/docs/framework/react/examples/row-selection
The code for my table component file in my app is shown below:
import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import { Checkbox } from '@mantine/core'
function Table3({habitsLogs, habits, deleteHabit, toggleHabit, toggleHabitPanel}) {
try {
const datesArr = ['d2024_07_10', 'd2024_07_09', 'd2024_07_08', 'd2024_07_07', 'd2024_07_06', 'd2024_07_05', 'd2024_07_04']
const CBox = ({habArrIdx, habWeekIdx, dFormat}) =>
<Checkbox
checked={habitsLogs[habArrIdx][dFormat]}
onChange={() => {
toggleHabit(habits[habArrIdx], habWeekIdx, datesArr)
}}
></Checkbox>
const TButton = ({ habit }) => <button
className='border-none'
onClick={() => {
toggleHabitPanel(habit)
}}>{habit.title}</button>
type Habit = {
title: string
dNeg1: number
dNeg2: number
dNeg3: number
dNeg4: number
dNeg5: number
dNeg6: number
dNeg7: number
total: number
}
const data: Habit[] = []
const columns = []
columns.push({accessorKey: 'title', header: 'Habit', cell: i => <TButton habit={i.getValue()}/>})
columns.push({accessorKey: 'dNeg1', header: '10/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={0} dFormat='d2024_07_10' />})
columns.push({accessorKey: 'dNeg2', header: '09/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={1} dFormat='d2024_07_09' />})
columns.push({accessorKey: 'dNeg3', header: '08/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={2} dFormat='d2024_07_08' />})
columns.push({accessorKey: 'dNeg4', header: '07/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={3} dFormat='d2024_07_07' />})
columns.push({accessorKey: 'dNeg5', header: '06/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={4} dFormat='d2024_07_06' />})
columns.push({accessorKey: 'dNeg6', header: '05/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={5} dFormat='d2024_07_05' />})
columns.push({accessorKey: 'dNeg7', header: '04/07', cell: i => <CBox habArrIdx={i.getValue()} habWeekIdx={6} dFormat='d2024_07_04' />})
columns.push({accessorKey: 'total', header: 'Total' })
habits.map((habit, count) => {
var totalCompletions: number = 0;
for (let completion_status in habitsLogs[count]) {
if (habitsLogs[count][completion_status]) {
totalCompletions += 1
}}
data.push(
{
title: habit,
dNeg1: count,
dNeg2: count,
dNeg3: count,
dNeg4: count,
dNeg5: count,
dNeg6: count,
dNeg7: count,
aaaa: habitsLogs[count].bbbb,
total: totalCompletions
})})
const table = useReactTable({data, columns, getCoreRowModel: getCoreRowModel() })
return (
useMemo(() => {
return (
<div className="TableContainer"><table className='border-none mt-12'>
<thead>
{table.getHeaderGroups().map(headerGroup => (<tr key={headerGroup.id}>{headerGroup.headers.map(header => {
return (<th key={header.id} colSpan={header.colSpan}>{header.isPlaceholder ? null :
(<>{flexRender( header.column.columnDef.header,header.getContext())}</>)}</th>)})}</tr>))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => {
return (<tr key={row.id}>{row.getVisibleCells().map(cell => {
return (
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>)
})}</tr>)})}
</tbody>
</table>
</div>
)}, []))
} catch (e) {
console.log(e)
}}
export default Table3
It’s the weirdest thing, but when I remove or change the line aaaa: habitsLogs[count].bbbb(I used aaaa as the field name and bbbb as the property to show how they could be anything), from data.push() in habits.map(), the entire table component breaks, and I get the error:
Table3.tsx:22 Uncaught
TypeError: Cannot read properties of undefined (reading 'd2024_07_10')
at CBox (Table3.tsx:22:38)
at renderWithHooks (chunk-PODSSOB4.js?v=45242bde:11568:26)
in my console, which seems totally unrelated…
I have absolutely no idea why it does this, I’ve:
- Read through all the official documentation on how to setup tables.
- Checked forums and sources for people with similar issues(also this is hard because the error I’m getting is (seemingly) nothing at all to do with the code or the changes I’m making to it.
- Gone back to the original example I worked from, and checked to see if I removed anything important
This issue is stopping me from moving forward with this project, and is also very similar to several other issues I’m getting which nullify my ability to work on core features for the table.
Appendix:
habitsLogs object example:
0: {id: 79, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}1: {id: 76, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}2: {id: 78, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}3: {id: 41, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}4: {id: 42, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}5: {id: 43, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}6: {id: 44, d2024_05_23: null, d2024_05_26: false, d2024_05_25: null, d2024_05_24: null, …}
habits object example:
[
{
"id": 76,
"created_at": "2024-07-14T12:19:05.394871+00:00",
"title": "do washing up",
"user_id": "xxx-xxx-xxx",
"is_archived": false,
"last_modified": null
},
{
"id": 71,
"created_at": "2024-07-14T12:19:05.394871+00:00",
"title": "sweep room",
"user_id": "xxx-xxx-xxx",
"is_archived": true,
"last_modified": null
}
]
3