[Feature]: Build a reusable DataTable component with built-in sorting and filtering so that all data-heavy views across the app can use a single consistent, powerful table implementation.

[imSubhro]

🤔 Problem It Solves

Right now data is displayed across multiple pages without a shared table component. Each view likely implements its own ad-hoc table structure with no sorting, no filtering, and no consistency. As the app grows and more data needs to be displayed this becomes harder to maintain and creates an inconsistent experience for users. A shared reusable DataTable component solves all of this in one place and becomes the foundation for every data view in the app going forward.

💡 Proposed Solution

• Build a reusable DataTable component that accepts columns and data as props.
• Sorting — clicking a column header sorts the table by that column in ascending or descending order with a visual indicator.
• Filtering — a search input above the table filters rows in real time based on any matching field.
• Pagination — display a configurable number of rows per page with next/previous controls.
• Keep the component fully typed if the project uses TypeScript.
• Style it consistently with the existing OPSCORD design system.

🔄 Alternatives Considered

A third-party library like TanStack Table or AG Grid could be used but they add significant bundle size and complexity. A lightweight custom component built for this project's specific needs is cleaner, more maintainable and keeps full control over styling and behavior.

📸 Mockups / Examples

Similar reusable table components are used across Linear, Notion databases, Airtable and most modern dashboards where data is displayed in sortable, filterable grids.

✅ Acceptance Criteria

• DataTable component created and accepts columns and data as props.
• Column header click sorts the table ascending and descending with a visual arrow indicator.
• A search/filter input filters rows in real time.
• Pagination controls allow navigating through large datasets.
• Component is reusable across at least two existing data views in the app.
• Fully responsive on mobile and desktop.
• Styled consistently with the existing OPSCORD UI.

📋 Additional Context

This is a frontend engineering task that will have long-term value for the entire codebase. Once this component exists, every new data view in the app can simply drop in <DataTable /> instead of building a new table from scratch each time. It is one of those contributions that keeps giving well beyond the initial PR.

🌱 Contributor Checklist

• I am participating via GSSoC
• I have read the contribution guidelines
• I checked for existing issues before creating this

[imSubhro]

Hi @probably-ABHINAV 👋

I'd love to work on this under GSSoC! 🚀

I noticed that across the app different pages are displaying data in their own way with no shared table component, no sorting and no filtering. It works for now but as the dataset grows and more views get added it becomes increasingly inconsistent and harder to maintain. A reusable DataTable component would fix all of that in one shot.

My plan is to build a clean DataTable component that takes columns and data as props and handles sorting, filtering and pagination internally. Clicking a column header will sort the table with a visual indicator, a search input above the table will filter rows in real time, and pagination will keep large datasets manageable. Once it's built it can be dropped into any existing or new data view across the app with minimal effort.

I won't be pulling in any heavy third-party table library for this — a lightweight custom component built specifically for OPSCORD is cleaner, easier to style to match the existing UI, and gives the project full control over its behavior going forward.

This is the kind of contribution that adds long-term value to the whole codebase, not just a one-off feature. Could you please assign this to me? Happy to discuss the API design for the component before I start! 😊

[probably-ABHINAV]

Assigned to @imSubhro
Note: While submitting the pr provide a ss for the update,

[github-actions]

👋 This issue has been automatically marked as stale because it has had no activity for 7 days. It will be closed in 3 days if no further activity occurs.
If you're still working on this, please comment to keep it open.

[imSubhro]

keep it open

[wangneal]

I can do it