feat(react): Add TableFooter and TableContainer components

packages/react/src/components/TableContainer/TableContainer.stories.mdx

@@ -0,0 +1,73 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import TableContainer from './TableContainer.tsx';
+import TableCell from '../TableCell/TableCell.tsx';
+import TableRow from '../TableRow/TableRow.tsx';
+import Table from '../Table/Table.tsx';
+import Paper from '../Paper/Paper.tsx';
+
+export const meta = {
+  component: TableContainer,
+  title: StoryConfig.TableContainer.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <TableContainer {...args} component={Paper}>
+      <Table>
+        <TableRow {...args}>
+          <TableCell>
+            Table Cell 1
+          </TableCell>
+          <TableCell>
+            Table Cell 2
+          </TableCell>
+        </TableRow>
+      </Table>
+    </TableContainer>
+  );
+};
+
+# TableContainer
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## TableContainer
+
+The `TableContainer` component is used to define a container for the `Table` component.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `TableContainer` component in your components as follows:
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Paper from '@oxygen-ui/react/Paper';
+import TableContainer from '@oxygen-ui/react/TableContainer';\n
+function Demo {
+  return (
+    <TableContainer component={Paper}>
+      {/** TableContainer content */}
+    </TableContainer>
+  );
+}
+`}
+/>

packages/react/src/components/TableContainer/TableContainer.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiTableContainer, {
+  TableContainerProps as MuiTableContainerProps,
+  TableContainerTypeMap,
+} from '@mui/material/TableContainer';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+import './table-container.scss';
+
+export type TableContainerProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TableContainerTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiTableContainerProps<D, P>, 'component'>;
+
+/**
+ * The TableContainer component lets display a container of the table
+ *
+ *
+ * API:
+ * - [TableContainer API](https://mui.com/material-ui/api/table-container/)
+ *
+ * @remarks
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Table component.
+ * @param ref - The ref to be forwarded to the MuiTable component.
+ * @returns The rendered Tablee component.
+ */
+const TableContainer: ForwardRefExoticComponent<TableContainerProps> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: TableContainerProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-table-container', className);
+
+    return <MuiTableContainer ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<TableContainerProps>;
+
+export default TableContainer;

packages/react/src/components/TableContainer/__tests__/TableContainer.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import TableContainer from '../TableContainer';
+
+describe('TableContainer', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <TableContainer>
+        <p>test TableContainer</p>
+      </TableContainer>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <TableContainer>
+        <p>test TableContainer</p>
+      </TableContainer>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/TableContainer/__tests__/__snapshots__/TableContainer.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableContainer should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiTableContainer-root oxygen-table-container css-rorn0c-MuiTableContainer-root"
+    >
+      <p>
+        test TableContainer
+      </p>
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/TableContainer/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './TableRow';
+export * from './TableRow';

packages/react/src/components/TableContainer/table-container.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-table-container {
+  /** Add Styles */
+}

packages/react/src/components/TableFooter/TableFooter.stories.mdx

@@ -0,0 +1,68 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import TableFooter from './TableFooter.tsx';
+import TableCell from '../TableCell/TableCell.tsx';
+import Table from '../Table/Table.tsx';
+
+export const meta = {
+  component: TableFooter,
+  title: StoryConfig.TableFooter.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <Table>
+      <TableFooter {...args}>
+        <TableCell>
+          Table Cell 1
+        </TableCell>
+        <TableCell>
+          Table Cell 2
+        </TableCell>
+      </TableFooter>
+    </Table>
+  );
+};
+
+# TableFooter
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## TableFooter
+
+The `TableFooter` component is used to define a footer for the `Table` component.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `TableFooter` component in your components as follows:
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import TableFooter from '@oxygen-ui/react/TableFooter';\n
+function Demo {
+  return (
+    <TableFooter>
+      {/** TableFooter content */}
+    </TableFooter>
+  );
+}
+`}
+/>

packages/react/src/components/TableFooter/TableFooter.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiTableFooter, {TableFooterProps as MuiTableFooterProps, TableFooterTypeMap} from '@mui/material/TableFooter';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+import './table-footer.scss';
+
+export type TableFooterProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TableFooterTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiTableFooterProps<D, P>, 'component'>;
+
+/**
+ * The TableFooter component lets display a footer of the table
+ *
+ *
+ * API:
+ * - [TableFooter API](https://mui.com/material-ui/api/table-footer/)
+ *
+ * @remarks
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the TableFooter component.
+ * @param ref - The ref to be forwarded to the MuiTableFooter component.
+ * @returns The rendered TableFooter component.
+ */
+const TableFooter: ForwardRefExoticComponent<TableFooterProps> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: TableFooterProps<C>,
+    ref: Ref<HTMLTableSectionElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-table-footer', className);
+
+    return <MuiTableFooter ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<TableFooterProps>;
+
+export default TableFooter;