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} />
}

TanStack•2y ago•

1 reply

colossal-harlequin

grokking deeply nested table data structure

// 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} />
}

grokking deeply nested table data structure

Similar Threads

grokking deeply nested table data structure

Similar Threads

Similar Threads

Similar Threads