diff --git a/src/collections/sistent/components/table/code.mdx b/src/collections/sistent/components/table/code.mdx
new file mode 100644
index 0000000000000..0f9f237680cd5
--- /dev/null
+++ b/src/collections/sistent/components/table/code.mdx
@@ -0,0 +1,380 @@
+---
+title: Table Code
+component: table
+description: A table displays structured data in rows and columns, enabling users to scan, compare, and interact with information efficiently.
+---
+
+import { useState, useEffect, useMemo } from "react";
+import { ResponsiveDataTable } from "@sistent/sistent";
+
+export const BasicTableDemo = () => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+ const columns = [
+ { name: "name", label: "Name" },
+ { name: "env", label: "Environment" },
+ { name: "status", label: "Status" },
+ ];
+ const data = [
+ ["meshery", "production", "Running"],
+ ["nighthawk", "staging", "Stopped"],
+ ["kanvas", "development", "Running"],
+ ];
+ const [tableCols, updateCols] = useState(columns);
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const options = {
+ filter: false, download: false, print: false, viewColumns: false,
+ selectableRows: "none", responsive: "standard", pagination: false,
+ search: false, elevation: 1,
+ };
+ if (!mounted) return null;
+ return (
+
+ );
+};
+
+export const SortableTableDemo = () => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+ const columns = [
+ { name: "name", label: "Name" },
+ { name: "version", label: "Version" },
+ ];
+ const data = [
+ ["meshery", "v0.7.1"],
+ ["kanvas", "v0.5.0"],
+ ["nighthawk", "v0.9.3"],
+ ];
+ const [tableCols, updateCols] = useState(columns);
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const options = {
+ filter: false, download: false, print: false, viewColumns: false,
+ selectableRows: "none", responsive: "standard", pagination: false,
+ search: false, sort: true, elevation: 1,
+ };
+ if (!mounted) return null;
+ return (
+
+ );
+};
+
+
+export const SelectableTableDemo = () => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+ const columns = useMemo(() => [
+ { name: "name", label: "Name" },
+ { name: "env", label: "Environment" },
+ ], []);
+ const data = useMemo(() => [
+ ["Alice", "production"],
+ ["Bob", "staging"],
+ ["Charlie", "development"],
+ ], []);
+ const [tableCols, updateCols] = useState(columns);
+ const [columnVisibility, setColumnVisibility] = useState({ name: true, env: true });
+ const options = {
+ filter: false, download: false, print: false, viewColumns: false,
+ selectableRows: "multiple", responsive: "standard", pagination: false,
+ search: false, elevation: 1,
+ };
+ if (!mounted) return null;
+ return (
+
+ );
+};
+
+export const PaginatedTableDemo = () => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+ const columns = [
+ { name: "name", label: "Name" },
+ { name: "owner", label: "Owner" },
+ { name: "age", label: "Age" },
+ { name: "status", label: "Status" },
+ ];
+ const data = Array.from({ length: 20 }, (_, i) => [
+ "service-" + (i + 1),
+ i % 3 === 0 ? "Alice" : i % 3 === 1 ? "Bob" : "Charlie",
+ (i + 1) + " months ago",
+ i % 2 === 0 ? "Running" : "Stopped",
+ ]);
+ const [tableCols, updateCols] = useState(columns);
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const options = {
+ filter: false, download: false, print: false, viewColumns: false,
+ selectableRows: "none", responsive: "standard", pagination: true,
+ rowsPerPage: 5, rowsPerPageOptions: [5, 10, 20], elevation: 1,
+ };
+ if (!mounted) return null;
+ return (
+
+ );
+};
+
+Tables communicate actions and data to users and can be placed at several places throughout the user interface.
+
+
+ Basic Table
+
+
+A minimal read-only table with a header row and data rows.
+
+
+
+
+
+
+
+
+ );
+}`} />
+
Sortable Table
+
+
+Clicking a column header sorts rows ascending or descending by that column.
+
+
+
+
+
+
+
+
+ );
+}`} />
+
Selectable Rows Table
+
+
+Setting selectableRows to "multiple" enables checkbox selection on each row.
+
+
+
+
+
+
+
+
+ );
+}`} />
+
Paginated Table
+
+
+ResponsiveDataTable from @sistent/sistent provides built-in pagination, column visibility, and responsive layout controls.
+
+
+
+
[
+ "service-" + (i + 1),
+ i % 3 === 0 ? "Alice" : i % 3 === 1 ? "Bob" : "Charlie",
+ (i + 1) + " months ago",
+ i % 2 === 0 ? "Running" : "Stopped",
+]);
+
+export default function PaginatedTable() {
+ const [tableCols, updateCols] = useState(columns);
+ const [columnVisibility, setColumnVisibility] = useState({});
+
+ const options = {
+ filter: false,
+ download: false,
+ print: false,
+ viewColumns: false,
+ selectableRows: "none",
+ responsive: "standard",
+ pagination: true,
+ rowsPerPage: 5,
+ rowsPerPageOptions: [5, 10, 20],
+ elevation: 1,
+ };
+
+ if (!mounted) return null;
+ return (
+
+ );
+}`} />
+Do
+
+
+
+ - Use tables for homogeneous data sets with three or more columns.
+ - Add a caption or
aria-label for assistive technologies.
+ - Use
size="small" for dense data-heavy views like log tables.
+ - Wrap the table in
TableContainer to enable horizontal scrolling on narrow viewports.
+ - Use
TablePagination when row count exceeds 25 with page sizes [10, 25, 50].
+ - Place inline row actions in the last column, right-aligned, using
IconButton with a descriptive aria-label.
+ - Always confirm destructive actions like delete before execution.
+
+
+
+ Don't
+
+
+
+ - Use tables purely for layout alignment of unrelated content.
+ - Mix unrelated data types across rows.
+ - Omit column headers — every table must have a
TableHead.
+ - Hard-code hex colour values — always use Sistent theme tokens.
+ - Rely on colour alone to convey row status; supplement with text or icons.
+
+
+
+ Row Density
+
+
+Sistent exposes a size prop on the Table component:
+
+
+ - Use
size="medium" (default) for general-purpose tables with comfortable vertical spacing.
+ - Use
size="small" for dense data-heavy views where vertical space is at a premium, such as log tables or comparison matrices.
+
+
+
+ Row Selection
+
+
+
+ - Place a
Checkbox in the first cell of each row and in the header row for select-all behaviour.
+ - Update the row background to
theme.palette.action.selected on selection.
+ - Show a selected-row count in a toolbar above the table.
+ - A single click on the checkbox should toggle selection.
+
+
+
+ Empty and Loading States
+
+
+
+ - Empty: Display a single full-width
TableCell spanning all columns with a brief message and call-to-action.
+ - Loading: Replace body rows with skeleton rows or a centered
CircularProgress inside a spanning cell.
+
diff --git a/src/collections/sistent/components/table/index.mdx b/src/collections/sistent/components/table/index.mdx
new file mode 100644
index 0000000000000..3e2094f5f70c2
--- /dev/null
+++ b/src/collections/sistent/components/table/index.mdx
@@ -0,0 +1,64 @@
+---
+name: "Table"
+title: Table
+published: true
+component: table
+description: A table displays structured data in rows and columns, enabling users to scan, compare, and interact with information efficiently.
+---
+
+Tables are used to organize and display structured data in rows and columns. They make it easy for users to scan, compare, and interact with information. The Table component in Sistent is built on Material UI primitives and supports full theming.
+
+
+ Overview
+
+
+The Table component organizes information into rows and columns, making it easy for users to read, compare, and analyze data. Use a Table when displaying multiple records with consistent attributes such as services, users, or deployments, when users need to compare values across rows or columns, or when data needs sorting, filtering, or pagination for large data sets.
+
+
+ Anatomy
+
+
+A Sistent Table is composed of the following sub-components:
+
+
+ - Table — Root container element.
+ - TableHead — Contains the header row with column labels.
+ - TableBody — Contains the data rows.
+ - TableRow — A single row within the head or body.
+ - TableCell — An individual cell, used for both header and data cells.
+ - TableFooter — Optional footer area, typically used for pagination controls.
+ - TablePagination — A helper component for adding page-size and navigation controls.
+ - TableSortLabel — A helper component for rendering a sortable column header with an arrow icon.
+ - TableContainer — A wrapper that enables horizontal scrolling on overflow.
+
+
+
+ Variants
+
+
+Basic Table
+
+The simplest form of a Table — static, read-only rows with a header.
+
+Sortable Table
+
+Columns whose headers include TableSortLabel allow users to reorder rows by ascending or descending value.
+
+Selectable Rows Table
+
+Rows include a leading Checkbox component so users can select one or more records for bulk actions.
+
+Paginated Table
+
+When a data set is large, TablePagination is added to the TableFooter to control which slice of data is displayed.
+
+
+ Accessibility
+
+
+
+ - Table headers should always be present with meaningful column labels.
+ - Provide a meaningful
aria-label on the Table root when its purpose is not obvious from surrounding context.
+ - Sortable columns expose
aria-sort automatically via TableSortLabel.
+ - Ensure all interactive elements inside cells are keyboard-focusable.
+