How can I have a Tanstack Table with a row already...

# javascript

[Hildebrandt Tobias]

How can I have a Tanstack Table with a row already pinned at the start?
I followed this example https://tanstack.com/table/v8/docs/framework/react/examples/row-pinning
But I get infinite re-render with

ColumnDefTemplate { info ->
    if(info.row.getIsPinned() == RowPinningPosition.`false` && info.row.original.materialNumber == rememberPin)
        info.row.pin(RowPinningPosition.top, false, false)
    info.getValue()
}

[turansky]

You call info.row.pin during render and force rerender

[Hildebrandt Tobias]

I also tried

useEffect(rememberPin) {
        productionMaterialTable
            .getRowModel()
            .rowsById
            .toPairList()
            .firstOrNull { (_, row) ->
                row.original.materialNumber == rememberPin
            }
            ?.second?.pin(<http://RowPinningPosition.top|RowPinningPosition.top>, false, false)
    }

But to no avail

[Hildebrandt Tobias]

Do you have a suggestion how to pin a row depending on a value during construction of the table?

[turansky]

You should set "isPinned" before render

[Hildebrandt Tobias]

But then it's never pinned, isn't it?
I load the site for the first time, load data, and want to pin one of the rows that has a specific value.
The value could also come from props for example, or for simplicity could just be "pin where materialNumber = 200".

[turansky]

useTable option should contain "isPinned" record (it already contains "isSelected" record)

[turansky]

Also you can modify table state before rendering

[Hildebrandt Tobias]

The TableOptions in useReactTable don't provide "isPinned"

[Hildebrandt Tobias]

How do I modify it before rendering? That is what I need.

[Hildebrandt Tobias]

useReactTable<T>(
    options = jso {
        val (expanded, setExpanded) = userSettings.expanded
        val (sorting, setSorting) = userSettings.sorting
        val (grouping, setGrouping) = userSettings.grouping
        val (columnVisibility, setColumnVisibility) = userSettings.columnVisibility
        val (globalFilter, setGlobalFilter) = userSettings.globalFilter
        val (columnFilters, setColumnFilters) = userSettings.columnFilters
        val (showFilters, setShowFilters) = userSettings.showFilters
        val (currentPage, setCurrentPage) = userSettings.page
//        val (rowPinning, setRowPinning) = userSettings.rowPinning
        val (currentRowsPerPage, setCurrentRowsPerPage) = userSettings.rowsPerPage

        this.data = data ?: emptyArray()
        this.columns = columns
        this.state = jso {
//            this.rowPinning = userSettings.rowPinning.component1()
            this.expanded = userSettings.expanded.component1().unsafeCast<ExpandedState>()
            this.sorting = userSettings.sorting.component1()
            this.grouping = userSettings.grouping.component1()
            this.columnVisibility = userSettings.columnVisibility.component1().toRecord()
            this.globalFilter = userSettings.globalFilter.component1()
            this.columnFilters = userSettings.columnFilters.component1()

        }
[...]

You mean here at the this.state?

[turansky]

val table = useTable()

// call table methods
// (pseudocode)
table.state.setPinned(...)

//
// render

[turansky]

Looks like solution

[Hildebrandt Tobias]

That was my very first attempt.
The problem there was, I don't know the rowId of the row that MaterialNumber X will inherit.

[Hildebrandt Tobias]

And the RowPinningState expects a rowId in top

[Hildebrandt Tobias]

Or will the rowId just be the corresponding index of the array that is put into the data of the table?

[turansky]

You can set custom rowId function

[Hildebrandt Tobias]

no way

[Hildebrandt Tobias]

Ah there it is https://tanstack.com/table/v8/docs/guide/rows

[turansky]

key function is what you need

[Hildebrandt Tobias]

Not this one? https://tanstack.com/table/v8/docs/guide/rows#row-ids

[Hildebrandt Tobias]

Let's see if this works

val productionMaterialTable =
        defaultTableOptions(
            productionMaterials,
            productionMaterialColumns,
            materialTableUserSettings
        ) {
            keepPinnedRows = true
            enablePinning = true

            this.getRowId = { row, _, _ ->
                row.materialNumber.value.toString()
            }
        }
    
    setRowPin(jso<RowPinningState> {
        top = arrayOf(rememberPin.value.toString())
    })

[Hildebrandt Tobias]

Sadly I get infinite rerenders with this:

val productionMaterialTable =
    defaultTableOptions(
        productionMaterials,
        productionMaterialColumns,
        materialTableUserSettings
    ) {
        keepPinnedRows = true
        enablePinning = true
        this.getRowId = { row, _, _ ->
            row.materialNumber.value.toString()
        }
    }
useEffect(rememberPin) {
    println(rememberPin)
    if(rememberPin.value >= 0) {
        println("SET PIN")
        setRowPin(jso<RowPinningState> {
            top = arrayOf(rememberPin.value.toString())
            bottom = arrayOf()
        })
    }
}

[Hildebrandt Tobias]

I also tried it without the useEffect

[Hildebrandt Tobias]

Okay this works:

val productionMaterialTable =
    defaultTableOptions(
        productionMaterials,
        productionMaterialColumns,
        materialTableUserSettings
    ) {
        keepPinnedRows = true
        enablePinning = true

        if(rememberPin.value >= 0) {
            state.rowPinning = jso<RowPinningState> {
                top = arrayOf(rememberPin.value.toString())
                bottom = arrayOf()
            }
        }
        
        this.getRowId = { row, _, _ ->
            row.materialNumber.value.toString()
        }
    }

[Hildebrandt Tobias]

Thank you for the help and pointers 💝