Custom sort key as parameter in column

[alexandersimoes]

Wondering if anyone else is running into this issue... basically i'm rendering serverside and generating my API url dynamically based on the page/sorting requested. When a column is simple like so:

{header:'name', accessor:'name'}

There is no problem. But when I specify an accessor function like say:

{
  header: "Profession",
  accessor: d => d.profession.name,
  render: ({value, row}) => <a href={`/profile/profession/${row.profession.slug}`}>{value}</a>
},

This makes creating my API url really challenging, because when trying to sort by the 2nd example column i'm given the function itself, when I need to generate a string. Something like /users_data_endpoint?order=profession.name.asc&limit=20&offset=0. It would be great to be able to specify a sortKey so my column could look like:

{
  header: "Profession",
  accessor: d => d.profession.name,
  render: ({value, row}) => <a href={`/profile/profession/${row.profession.slug}`}>{value}</a>,
  sortKey: "profession.name",
},

And get this sortKey back as part of the sorting object in the instance argument in my onChange event listener. Does this make sense? Is anyone else facing a problem similar while doing serverside rendering?

[tannerlinsley]

Technically you shouldn't be able to use a function accessor without it requiring you to also set a column id. This id is what is used in the sorting model. Does that clear things up a bit more?

[tannerlinsley]

So your column should look like this:

{
  header: "Profession",
  accessor: d => d.profession.name,
  render: ({value, row}) => <a href={`/profile/profession/${row.profession.slug}`}>{value}</a>,
  id: "professionName",
},

If you are able to use a function accessor without an ID, then I need to fix that.

[alexandersimoes]

Yes, you're right... that's exactly what I needed. Thx!

[tannerlinsley]

No problem!

[tommyalvarez]

@tannerlinsley i have another use case where i need to customize filtering and sort keys because the backend api expects them in a 'certain' way and since it's server-side filtering and sorting, i can't change that. For example, for a text column, i need the filtering key to be 'column_name_like' whereas the sorting key needs to be 'column_name'. Does react table support specifying customized keys for filtering and sorting? As you can see i can't depend on the id parameter of the header column because it's shared by filter and sorting