Inferring types for nested objects

I need help on how to setup the types for the data returned so I can get correct autocomplete:

dashboard.tsx

1 Reply

The table component:

import { ScrollArea, Table } from '@mantine/core';
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { useState } from 'react';
import { ITEMS_PER_PAGE } from '~/lib/constants';

const _Table = ({ columns, data, rowCount }) => {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: ITEMS_PER_PAGE,
  });
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    rowCount,
    onPaginationChange: setPagination,
    state: {
      pagination,
    },
  });
  return (
    <>
      <ScrollArea className='py-8 mb-24' my='xl'>
        <Table
          className='bg-green-300'
          py='xl'
          withColumnBorders
          withTableBorder
        >
          <Table.Thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <Table.Tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <Table.Th key={header.id} colSpan={header.colSpan}>
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
                  </Table.Th>
                ))}
              </Table.Tr>
            ))}
          </Table.Thead>
          <Table.Tbody>
            {table.getRowModel().rows.map((row) => (
              <Table.Tr key={row.id}>
                {row.getVisibleCells().map((cell) => (
                  <Table.Td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </Table.Td>
                ))}
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </ScrollArea>
    </>
  );
};

export default _Table;

import { ScrollArea, Table } from '@mantine/core';
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { useState } from 'react';
import { ITEMS_PER_PAGE } from '~/lib/constants';

const _Table = ({ columns, data, rowCount }) => {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: ITEMS_PER_PAGE,
  });
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    rowCount,
    onPaginationChange: setPagination,
    state: {
      pagination,
    },
  });
  return (
    <>
      <ScrollArea className='py-8 mb-24' my='xl'>
        <Table
          className='bg-green-300'
          py='xl'
          withColumnBorders
          withTableBorder
        >
          <Table.Thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <Table.Tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <Table.Th key={header.id} colSpan={header.colSpan}>
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
                  </Table.Th>
                ))}
              </Table.Tr>
            ))}
          </Table.Thead>
          <Table.Tbody>
            {table.getRowModel().rows.map((row) => (
              <Table.Tr key={row.id}>
                {row.getVisibleCells().map((cell) => (
                  <Table.Td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </Table.Td>
                ))}
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </ScrollArea>
    </>
  );
};

export default _Table;

columns definition: all red lines:

import { createColumnHelper } from '@tanstack/react-table';
import type { Student } from './types';

export const studentsColumns = () => {
  const columnHelper = createColumnHelper<Student>();

  return [
    columnHelper.accessor('students.id', {}),
    columnHelper.accessor('students.classID', {}),
    columnHelper.accessor('students.status', {}),
    columnHelper.accessor('profiles.firstName', {}),
    columnHelper.accessor('profiles.middleName', {}),
    columnHelper.accessor('profiles.lastName', {}),
  ];
};

import { createColumnHelper } from '@tanstack/react-table';
import type { Student } from './types';

export const studentsColumns = () => {
  const columnHelper = createColumnHelper<Student>();

  return [
    columnHelper.accessor('students.id', {}),
    columnHelper.accessor('students.classID', {}),
    columnHelper.accessor('students.status', {}),
    columnHelper.accessor('profiles.firstName', {}),
    columnHelper.accessor('profiles.middleName', {}),
    columnHelper.accessor('profiles.lastName', {}),
  ];
};

// types.ts

import { student } from '~/.server/db/schema/user';
export type Student = typeof student.$inferSelect;

import { student } from '~/.server/db/schema/user';
export type Student = typeof student.$inferSelect;

Gaming

Programming

Inferring types for nested objects