T
TanStack•3y ago
ugly-tan

Default sorting icon

How do I set a default sorting icon? I've seen some ppl suggest using canSort in an operation but it doesn't seem to exist in v8? I'm using the default sorting code w/ bootstrap icons 
const [sorting, setSorting] = useState([]);
    
    const table = useReactTable({
        data: data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        state: {
            sorting: sorting
        },
        onSortingChange: setSorting
    })

<thead>
                                        {table.getHeaderGroups().map(headerGroup => (
                                            <tr key={headerGroup.id}>
                                                {headerGroup.headers.map(header => (
                                                    <th key={header.id} colSpan={header.colSpan} onClick={header.column.getToggleSortingHandler()}>
                                                        {header.isPlaceholder
                                                            ? null
                                                            : flexRender(
                                                                header.column.columnDef.header,
                                                                header.getContext()
                                                        )}

                                                        {
                                                            {
                                                                asc: <i className="bi bi-caret-up-fill"></i>,
                                                                desc: <i className="bi bi-caret-down-fill"></i>
                                                            }[header.column.getIsSorted() ?? null]
                                                        }
                                                    </th>
                                                ))}
                                            </tr>
                                        ))}
                                    </thead>
const [sorting, setSorting] = useState([]);
    
    const table = useReactTable({
        data: data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        state: {
            sorting: sorting
        },
        onSortingChange: setSorting
    })

<thead>
                                        {table.getHeaderGroups().map(headerGroup => (
                                            <tr key={headerGroup.id}>
                                                {headerGroup.headers.map(header => (
                                                    <th key={header.id} colSpan={header.colSpan} onClick={header.column.getToggleSortingHandler()}>
                                                        {header.isPlaceholder
                                                            ? null
                                                            : flexRender(
                                                                header.column.columnDef.header,
                                                                header.getContext()
                                                        )}

                                                        {
                                                            {
                                                                asc: <i className="bi bi-caret-up-fill"></i>,
                                                                desc: <i className="bi bi-caret-down-fill"></i>
                                                            }[header.column.getIsSorted() ?? null]
                                                        }
                                                    </th>
                                                ))}
                                            </tr>
                                        ))}
                                    </thead>
2 Replies
optimistic-gold
optimistic-gold•2y ago
Hey, wondering if you ever got anywhere with this? I've also not been able to set the asc or desc icons as it seems to only accept a string 🤔 I believe I've managed to set a default icon, you can set the null in [header.column.getIsSorted() ?? null] to be an icon - that should set it as the default.
like-gold
like-gold•2y ago
Have you seen column.getCanSort()?https://tanstack.com/table/v8/docs/api/features/sorting#getcansort
Sorting APIs | TanStack Table Docs
State Sorting state is stored on the table using the following shape:

Did you find this page helpful?