T
TanStack•3y ago
flat-fuchsia

How do I set the default column to sort?

Hi, I'm making a table for a log of user infractions and im wondering how I can make the items sorted by the caseId in a descending 
    let defaultColumns = [
        columnHelper.accessor('caseId', {
            header: 'Case ID',
            cell: cell => (
                <>
                    {cell.getValue()}{' '}
                    <Link className="Utils__FluorineBlue" to={`/guilds/${params.id}/cases/${cell.getValue()}`}>
                        Open
                    </Link>
                </>
            )
        }),
        columnHelper.accessor('type', {
            header: 'Case Type',
            cell: ({ getValue }) => {
                return useMemo(() => toTitleCase(getValue()), [getValue()]);
            }
        }),
        columnHelper.accessor('caseCreator', {
            header: 'Moderator',
            cell: ({ getValue }) => {
                return useMemo(() => <AvatarWithName guildId={params.id ?? ''} userId={getValue()} />, [getValue()]);
            }
        }),
        columnHelper.accessor('moderatedUser', {
            header: 'Offender',
            cell: ({ getValue }) => {
                return useMemo(() => <AvatarWithName guildId={params.id ?? ''} userId={getValue()} />, [getValue()]);
            }
        }),
        columnHelper.accessor('reason', {
            header: 'Case Reason'
        })
    ];
    let defaultColumns = [
        columnHelper.accessor('caseId', {
            header: 'Case ID',
            cell: cell => (
                <>
                    {cell.getValue()}{' '}
                    <Link className="Utils__FluorineBlue" to={`/guilds/${params.id}/cases/${cell.getValue()}`}>
                        Open
                    </Link>
                </>
            )
        }),
        columnHelper.accessor('type', {
            header: 'Case Type',
            cell: ({ getValue }) => {
                return useMemo(() => toTitleCase(getValue()), [getValue()]);
            }
        }),
        columnHelper.accessor('caseCreator', {
            header: 'Moderator',
            cell: ({ getValue }) => {
                return useMemo(() => <AvatarWithName guildId={params.id ?? ''} userId={getValue()} />, [getValue()]);
            }
        }),
        columnHelper.accessor('moderatedUser', {
            header: 'Offender',
            cell: ({ getValue }) => {
                return useMemo(() => <AvatarWithName guildId={params.id ?? ''} userId={getValue()} />, [getValue()]);
            }
        }),
        columnHelper.accessor('reason', {
            header: 'Case Reason'
        })
    ];
My code is as above for defining the columns.
2 Replies
fascinating-indigo
fascinating-indigo•3y ago
Hi. You'll actually want to set initial sorting state when you make your call to useReactTable(). For example, my call to useReactTable() looks something like this: 
  const table = useReactTable({
    data,
    columns,
    state: {
      columnFilters,
      sorting,
    },
    enableMultiSort: true,
    ...
  const table = useReactTable({
    data,
    columns,
    state: {
      columnFilters,
      sorting,
    },
    enableMultiSort: true,
    ...
The state property is what you are interested in. sorting should be something like: 
[
  { 
    "id": "column1", 
    "desc": true, 
  }, 
  { 
    "id": "column2", 
    "desc": false, 
  },
]
[
  { 
    "id": "column1", 
    "desc": true, 
  }, 
  { 
    "id": "column2", 
    "desc": false, 
  },
]
Where each object is the column that you want to sort by, id is the accessor for that column, and desc is a true/false based on whether you want to sort in descending order or not. The order in which you list your column objects in that array is the order in which they will be sorted.
flat-fuchsia
flat-fuchsiaOP•3y ago
alright thank you

Did you find this page helpful?