feat: Updated ads-old table to accept custom row component (#38334)

## Description

This PR adds the support to pass custom row component to ads-old/table.
This change is required for the new changes in admin settings page.

Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12476614610>
> Commit: db2b017ffc6bff5baf2f232550c11d2500e9cb1f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12476614610&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 24 Dec 2024 05:57:40 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a customizable row component for the Table, allowing users
to define how rows are rendered.
  
- **Enhancements**
- Improved type safety for row components, enhancing overall component
reliability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/ads-old/src/Table/index.tsx

@@ -1,4 +1,9 @@
-import { useTable, useSortBy, useExpanded } from "react-table";
+import {
+  useTable,
+  useSortBy,
+  useExpanded,
+  type Row as ReactTableRow,
+} from "react-table";
 import React from "react";
 import styled from "styled-components";
 import { Classes } from "../constants/classes";
@@ -141,8 +146,16 @@ export interface TableProps {
   isLoading?: boolean;
   loaderComponent?: JSX.Element;
   noDataComponent?: JSX.Element;
+  RowComponent?: React.ComponentType<any>;
 }
 
+const Row = ({
+  children,
+  ...props
+}: React.ComponentProps<"tr"> & { row: ReactTableRow<object> }) => {
+  return <tr {...props}>{children}</tr>;
+};
+
 function Table(props: TableProps) {
   const {
     columns,
@@ -150,6 +163,7 @@ function Table(props: TableProps) {
     isLoading = false,
     loaderComponent,
     noDataComponent,
+    RowComponent = Row,
   } = props;
 
   const { getTableBodyProps, getTableProps, headerGroups, prepareRow, rows } =
@@ -201,7 +215,7 @@ function Table(props: TableProps) {
               prepareRow(row);
 
               return (
-                <tr {...row.getRowProps()} key={index}>
+                <RowComponent {...row.getRowProps()} key={index} row={row}>
                   {row.cells.map((cell, index) => {
                     return (
                       <td
@@ -213,7 +227,7 @@ function Table(props: TableProps) {
                       </td>
                     );
                   })}
-                </tr>
+                </RowComponent>
               );
             })
           ) : (