T
TanStack•16mo ago
unwilling-turquoise

grokking deeply nested table data structure

I think i'm close but not getting any rows to render the values. I'm using the DataTable shadcn component. I have this deeply nested object that comes back with all the data about a tables fields: flat array of the columns records: contains each record, the array of recordValue objects, which themselves have the details about the value and associated field and fieldType. Not sure if the columns AND data structure basically have to be in the same 'shape'. I was having trouble finding any examples of tanstack table created dynamically 
// creates the columns dynamically
export function setDataTableColumns(data: DataTableResult): ColumnDef<DataTableRecords[number], DataTableColumn>[] {
    const fieldTypes = data.records[0]?.recordValues[0]?.field

    return data.fields.map((field) => ({
        accessorKey: field.shortId,
        header: field.name,
        // TODO: format depending on field type
        cell: (props) => props.getValue(),
    }))
}
// creates the columns dynamically
export function setDataTableColumns(data: DataTableResult): ColumnDef<DataTableRecords[number], DataTableColumn>[] {
    const fieldTypes = data.records[0]?.recordValues[0]?.field

    return data.fields.map((field) => ({
        accessorKey: field.shortId,
        header: field.name,
        // TODO: format depending on field type
        cell: (props) => props.getValue(),
    }))
}
interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
}
...
function Component() {
    const { data } = useQuery(dataTableQueries.getTableData('tbli9uVubjxzAxGED'))

    if (!data) return <div>Loading...</div>
    const typedData = data.data as unknown as DataTableResult //! String -> Date cooerce due to JSON serialization

    const columns = setDataTableColumns(typedData)

    return <DataTable data={typedData.records} columns={columns} />
}
interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
}
...
function Component() {
    const { data } = useQuery(dataTableQueries.getTableData('tbli9uVubjxzAxGED'))

    if (!data) return <div>Loading...</div>
    const typedData = data.data as unknown as DataTableResult //! String -> Date cooerce due to JSON serialization

    const columns = setDataTableColumns(typedData)

    return <DataTable data={typedData.records} columns={columns} />
}
No description
1 Reply
unwilling-turquoise
unwilling-turquoiseOP•16mo ago
ok i think this works better. thx god for gpt4 to help. happy to hear any suggestions or if passing this kind of data to the table is a potential footgun 
export function setDataTableColumns(
    data: DataTableResult,
): ColumnDef<DataTableRecords[number], DataTableRecordValue>[] {
    return data.fields.map((field) => ({
        accessorKey: field.shortId,
        header: field.name,
        accessorFn: (row) => {
            const recordValue = row.recordValues.find((rv) => rv.field.shortId === field.shortId)
            return recordValue ? recordValue.value : undefined
        },
        // TODO: format depending on field type
        cell: (props) => {
            const recordValue = props.row.original.recordValues.find((rv) => rv.field.shortId === field.shortId)
            const value = recordValue ? recordValue.value : undefined
            const fieldType = recordValue ? recordValue.field.fieldType.name : undefined

            switch (fieldType) {
                ...
}
export function setDataTableColumns(
    data: DataTableResult,
): ColumnDef<DataTableRecords[number], DataTableRecordValue>[] {
    return data.fields.map((field) => ({
        accessorKey: field.shortId,
        header: field.name,
        accessorFn: (row) => {
            const recordValue = row.recordValues.find((rv) => rv.field.shortId === field.shortId)
            return recordValue ? recordValue.value : undefined
        },
        // TODO: format depending on field type
        cell: (props) => {
            const recordValue = props.row.original.recordValues.find((rv) => rv.field.shortId === field.shortId)
            const value = recordValue ? recordValue.value : undefined
            const fieldType = recordValue ? recordValue.field.fieldType.name : undefined

            switch (fieldType) {
                ...
}

Did you find this page helpful?