Migrate mui-datatables from JavaScript to TypeScript

[Rajesh-Nagarajan-11]

Description

Migrate the codebase to TypeScript to improve reliability, contributor experience, and long-term maintainability while preserving current functionality.

Scope

• Convert .js/.jsx files to .ts/.tsx in phases.
• Add TypeScript config (tsconfig.json) and type-checking in CI.
• Add strong types for:
  • table options
  • column definitions
  • custom renderers/callbacks
  • component override interfaces
• Update build/test/lint setup for TypeScript.
• Resolve migration-related TypeScript errors.

Acceptance Tests

• Build succeeds with zero TypeScript errors/warnings.
• All table functionality works as before (filtering, sorting, pagination, etc.).
• Verified compatible with dependent projects:
  • Meshery UI
  • Sistent
  • Meshery Cloud
  • Meshery Extensions
• Type-checking passes in CI

Contributor Guide and Resources

• 📚 Instructions for contributing to documentation
  • Layer5 documentation site and source
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[indevi]

will like to assist @Rajesh-Nagarajan-11, are u planning to create sub issues?

[Rajesh-Nagarajan-11]

Hey @indevi, thanks! Since it involves fewer than 25 JS files, we can easily handle and migrate this entire component to TypeScript. Here’s the plan to do it:

Prerequisite

• Complete the SWC migration first: Swc migration #26
• This needs to be merged before proceeding, as it ensures a cleaner and smoother migration flow.

Phase 1: Setup & Configuration

• Initialize TypeScript config (tsconfig.json)
• Install type definitions (@types/*)
• Update build configurations

Phase 2: Core Components

• Convert MUIDataTable.js (main component)
• Define core types/interfaces

Phase 3: UI Components

• Convert component files (ExpandButton, selectable cells, etc.)
• Add prop interfaces for each component

Phase 4: Utilities & Helpers

• Convert utils.js
• Convert plugin utilities
• Convert localStorage utilities

Phase 5: Hooks & Advanced Features

• Convert custom hooks
• Convert plugins
• Convert custom components

Phase 6: Tests

• Convert test files to TypeScript
• Update test utilities

Phase 7: Examples & Docs

• Convert example files
• Update documentation

Phase 8: Build & Verification

• Run full build
• Verify no type errors
• Test functionality

[snakefood3232]

I see you're looking to migrate mui-datatables from JavaScript to TypeScript to improve reliability and maintainability. I'd handle this by converting .js/.jsx to .ts/.tsx in phases, introducing a tsconfig, and adding strong typing for key components like table options and custom renderers. I can have a PR up within 5 days, ensuring that the build succeeds with no TypeScript errors and all functionalities remain intact. I've previously migrated a similar large-scale React project to TypeScript, ensuring seamless integration and functionality.

[Rajesh-Nagarajan-11]

Please review the prerequisites and ensure they are completed before starting work on the issue. Also, make sure the issue is assigned to you first.