How do I create a custom datatable component with generics?

[adnanlah]

Hello,

I would like to create a custom mantine-datatable component for a paginated table. I tried this approach but the problem is the record param in the render function doesn't get inferred correctly and it gets inferred as any instead. This is the code:

import { DataTable, DataTableColumn, DataTableProps } from 'mantine-datatable'
import { useEffect, useState } from 'react'

type Props<T extends Record<string, unknown>> = {
  data: T[]
  columns: DataTableColumn<T>[]
  pageSize: number
} & DataTableProps

function PaginatedDatatable<T extends Record<string, unknown>>(props: Props<T>) {
  const { data, pageSize, columns, ...restProps } = props
  const [page, setPage] = useState(1)
  const [records, setRecords] = useState<T[]>(data?.slice(0, pageSize))

  useEffect(() => {
    const from = (page - 1) * pageSize
    const to = from + pageSize
    setRecords(data?.slice(from, to))
  }, [page])

  return (
    <DataTable
      columns={columns}
      records={records}
      totalRecords={data?.length}
      recordsPerPage={pageSize}
      page={page}
      onPageChange={(p) => setPage(p)}
      minHeight={200}
      {...restProps}
    />
  )
}

This is the implementation of the component:

const { data: templates } = trpc.labelTemplate.getAll.useQuery()

// templates is of type: `EntityDTO<LabelTemplate>[] | undefined`

<PaginatedDatatable
  data={templates}
  pageSize={3}
  columns={[
    {
      accessor: 'labelSize',
      title: 'Label size',
      render: (record) => { // <== record not inferred as `any`
        // some code goes here...
      }
    }
  ]}
/>

I would appreciate any help. Thank you very much.