feat: export from Query Table (logs & traces) and added pagination. E…

[cghiurea]

📄 Summary

Adds export functionality using existing CSV/Excel export component and enhanced pagination controls to the Query Table component used in Logs and Traces. Users can now export table data and select from expanded page size options

---

✅ Changes

• Feature: Add page size selector to QueryTable pagination.
• Feature: Enable showSizeChanger in pagination config.
• Feature: Make createDownloadableData utility generic for all table row data. (It's not used anywhere)
• Feature: Enable downloadOption prop in Traces and Logs Query Builder ( Table View )

---

🏷️ Required: Add Relevant Labels

• frontend
• enhancement
• ui

👥 Reviewers

• frontend

🧪 How to Test

1. Navigate to Logs Explorer or Traces Explorer → Select Table view
2. Verify pagination dropdown shows page size options: 10, 25, 50, 100, 200, 500, 1000
3. Change page size and confirm table updates correctly
4. Click the Download button and export as CSV or Excel
5. Verify exported file contains all visible table columns and data
6. Confirm export respects current filters and time range

---

🔍 Related Issues

#8923

---

📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)

---

📋 Checklist

• Dev Review
• Test cases added (Unit/ Integration / E2E)
• Manually tested the changes

---

Note

Enables exporting and paginating data in tables used by Logs and Traces.

• QueryTable: adds Ant Pagination control with page size options [10, 25, 50, 100, 200, 500, 1000], client-side slicing, and reset-on-data-change
• Export: new generic createDownloadableData (supports columnLabels and valueTransforms) to export filtered data (all rows) as CSV/Excel; filenames now include serviceName and a timestamp
• Download UI: replaces text button with icon + tooltip, disables while loading, and truncates Excel sheet names to 31 chars
• Integration: enables downloadOption in LogsExplorerTable and TracesExplorer TableView; adds labels/transforms for Top Operation metrics
• Styling: adds .query-table-controls container and removes absolute-positioned download button

^{Written by Cursor Bugbot for commit d3b8af0. This will update automatically on new commits. Configure here.}

[welcome]

Welcome to the SigNoz community! Thank you for your first pull request and making this project better. 🤗

[CLAassistant]

All committers have signed the CLA.

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[nityanandagohain]

• There is no way to go back to 10/page after selecting a different value.
• Change download icon

---

@YounixM can you suggest if the place for selecting the size is in the right place or we can accodomate it on top.

Also the right place to keep the download button. I believe we can put the download button and page size on the same row towards the right and change the download icon similar to logs

[cghiurea]

• here is no way to go back to 10/page after selecting a different value.

Fixed losing the initial pagination.

Now all it's left is the pagination button

[cghiurea]

@nityanandagohain

Also the right place to keep the download button. I believe we can put the download button and page size on the same row towards the right and change the download icon similar to logs

I tried doing it, but the pagination is part of the Ant Table, and I couldn’t get the download button on the same level.

Since Ant Table generates its own pagination, I wasn’t able to move or align the download button:

On hover:

@nityanandagohain
The page you are referring to uses a custom controls not ants, and this control is built for server side pagination. The QueryTable returns all rows and it's client side.

<Controls
	isLoading={isLoading}
	totalCount={totalCount}
	offset={pagination.offset}
	countPerPage={pagination.limit}
	perPageOptions={perPageOptions}
	handleCountItemsPerPageChange={handleCountItemsPerPageChange}
	handleNavigateNext={handleNavigateNext}
	handleNavigatePrevious={handleNavigatePrevious}
	showSizeChanger={showSizeChanger}
/>

[ahmadshaheer]

@nityanandagohain

Also the right place to keep the download button. I believe we can put the download button and page size on the same row towards the right and change the download icon similar to logs

I tried doing it, but the pagination is part of the Ant Table, and I couldn’t get the download button on the same level.

Since Ant Table generates its own pagination, I wasn’t able to move or align the download button:

On hover:

@nityanandagohain The page you are referring to uses a custom controls not ants, and this control is built for server side pagination. The QueryTable returns all rows and it's client side.

<Controls
	isLoading={isLoading}
	totalCount={totalCount}
	offset={pagination.offset}
	countPerPage={pagination.limit}
	perPageOptions={perPageOptions}
	handleCountItemsPerPageChange={handleCountItemsPerPageChange}
	handleNavigateNext={handleNavigateNext}
	handleNavigatePrevious={handleNavigatePrevious}
	showSizeChanger={showSizeChanger}
/>

@cghiurea you use src/container/PageSizeSelect/index.tsx IMO?

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cghiurea]

@ahmadshaheer After pulling the latest changes from main, I started seeing TypeScript errors on my staged files. Before that, I was able to commit without any TS errors. I even tried making a commit with just a single whitespace change and still got the same errors.

How did these errors get introduced? All of my previous commits passed linting, and I’m assuming others’ commits are linted as well. Was there a recent change to the ESLint or TSConfig settings?

[cghiurea]

Feature is done. @ahmadshaheer @nityanandagohain

[cghiurea]

Hello to whom it may concern,
Please advise on any steps needed to move this PR forward.

Thank you for your time.

[cghiurea]

Hello, any feedback on the next steps?