question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom sort key as parameter in column

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
tommyalvarezcommented, Apr 25, 2018

@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

1reaction
tannerlinsleycommented, Oct 31, 2016

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom sort key as parameter in column - TanStack/table
There is no problem. But when I specify an accessor function like say: { header: "Profession", accessor: d => d.profession.name, render: ({value ...
Read more >
Sort data using a custom list - Microsoft Support
In a column of a worksheet, type the values to sort by. · Select all of the cells in that list, and then...
Read more >
Working with sort keys - Amazon Redshift - AWS Documentation
When you create a table, you can define one or more of its columns as sort keys. When data is initially loaded into...
Read more >
Use Parameters to Custom Sort a Tableau Dashboard
In this tutorial we'll create a custom sort in Tableau using parameters. This video builds upon the dashboard shown built previously ...
Read more >
Is it possible to create a custom sorting key at the column level ...
The end goal is to be able to take a column of data that uses alphanumeric characters and sort them in a way...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found