[docs][material-ui] Add docs for complementary Table components (#43756)

Signed-off-by: Eng Zer Jun <[email protected]>
Co-authored-by: ZeeshanTamboli <[email protected]>

docs/data/material/components/table/table.md

@@ -20,6 +20,20 @@ Tables display information in a way that's easy to scan, so that users can look
 
 {{"component": "@mui/docs/ComponentLinkHeader"}}
 
+## Introduction
+
+Tables are implemented using a collection of related components:
+
+- `<TableContainer />`: A wrapper that provides horizontally scrolling behavior for the `<Table />` component.
+- `<Table />`: The main component for the table element. Renders as a `<table>` by default.
+- `<TableHead />`: The container for the header row(s) of `<Table />`. Renders as a `<thead>` by default.
+- `<TableBody />`: The container for the body rows of `<Table />`. Renders as a `<tbody>` by default.
+- `<TableRow />`: A row in a table. Can be used in `<TableHead />`, `<TableBody />`, or `<TableFooter />`. Renders as a `<tr>` by default.
+- `<TableCell />`: A cell in a table. Can be used in `<TableRow />` . Renders as a `<th>` in `<TableHead />` and `<td>` in `<TableBody />` by default.
+- `<TableFooter />`: An optional container for the footer row(s) of the table. Renders as a `<tfoot>` by default.
+- `<TablePagination />`: A component that provides controls for paginating table data. See the ['Sorting & selecting' example](#sorting-amp-selecting) and ['Custom Table Pagination Action' example](#custom-pagination-actions).
+- `<TableSortLabel />`: A component used to display sorting controls for column headers, allowing users to sort data in ascending or descending order. See the ['Sorting & selecting' example](#sorting-amp-selecting).
+
 ## Basic table
 
 A simple example with no frills.