Allow users to sort traces

[ccschmitz]

Summary

Allows users to sort traces by clicking the column headers of the traces table.

https://www.loom.com/share/cd09c436b33548d0bdf6add86439a98e

How did you test this change?

• Click table headers to trigger sorting
  • Ensure results are sorted correctly
  • Ensure that scrolling loads the correct results
• Ensure scrolling backward on logs loads the correct results
• Ensure all results load as expected for logs and traces

Are there any deployment considerations?

We will want to monitor performance when using sorting. My testing was in development without a lot of data, but it could have a more drastic negative impact on performance in production.

Does this work require review from our design team?

Have been discussing the UX of table headers w/ @julian-highlight in https://linear.app/highlight/issue/HIG-4525/improvements-to-table-headers which will include some additional changes to table headers.

[linear]

HIG-4572 Allow users to sort by duration

[changeset-bot]

⚠️ No Changeset found

Latest commit: 35f0373

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[ccschmitz]

@mayberryzane ready for another look whenever you have time!