Skip to content

Fix(sistent): Added Table component documentation #7737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kanishksingh23 wants to merge 3 commits into
base: master
Choose a base branch
from
+513 −0
Open

Fix(sistent): Added Table component documentation #7737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e70e46
fix(sistent): add Table component documentation
kanishksingh23 May 16, 2026
95f770c
fix(sistent): wire up selectable rows state in SelectableTableDemo
kanishksingh23 May 16, 2026
7a88b6f
Merge branch 'master' into fix/sistent-table-docs-v2
kanishksingh23 May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
385 changes: 385 additions & 0 deletions src/collections/sistent/components/table/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,385 @@
---
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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
};

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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
};


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 [selectedRows, setSelectedRows] = useState([]);
const options = {
filter: false, download: false, print: false, viewColumns: false,
selectableRows: "multiple", responsive: "standard", pagination: false,
search: false, elevation: 1,
rowsSelected: selectedRows,
onRowSelectionChange: (current, allSelected) => {
setSelectedRows(allSelected.map((r) => r.dataIndex));
},
};
if (!mounted) return null;
return (
<ResponsiveDataTable
columns={tableCols}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
};

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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
};

Tables communicate actions and data to users and can be placed at several places throughout the user interface.

<a id="Basic Table">
<h2>Basic Table</h2>
</a>

A minimal read-only table with a header row and data rows.

<div className="showcase">
<div className="items">
<ThemeWrapper>
<BasicTableDemo />
</ThemeWrapper>
</div>
<CodeBlock name="basic-table" collapsible code={`import { useState, useEffect, useMemo } from "react";
import { ResponsiveDataTable } from "@sistent/sistent";

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"],
];

export default function BasicTable() {
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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
}`} />
</div>

<a id="Sortable Table">
<h2>Sortable Table</h2>
</a>

Clicking a column header sorts rows ascending or descending by that column.

<div className="showcase">
<div className="items">
<ThemeWrapper>
<SortableTableDemo />
</ThemeWrapper>
</div>
<CodeBlock name="sortable-table" collapsible code={`import { useState, useEffect, useMemo } from "react";
import { ResponsiveDataTable } from "@sistent/sistent";

const columns = [
{ name: "name", label: "Name" },
{ name: "version", label: "Version" },
];

const data = [
["meshery", "v0.7.1"],
["kanvas", "v0.5.0"],
["nighthawk", "v0.9.3"],
];

export default function SortableTable() {
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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
}`} />
</div>

<a id="Selectable Rows Table">
<h2>Selectable Rows Table</h2>
</a>

Setting <code>selectableRows</code> to <code>"multiple"</code> enables checkbox selection on each row.

<div className="showcase">
<div className="items">
<ThemeWrapper>
<SelectableTableDemo />
</ThemeWrapper>
</div>
<CodeBlock name="selectable-table" collapsible code={`import { useState, useEffect, useMemo } from "react";
import { ResponsiveDataTable } from "@sistent/sistent";

const columns = [
{ name: "name", label: "Name" },
{ name: "env", label: "Environment" },
];

const data = [
["Alice", "production"],
["Bob", "staging"],
["Charlie", "development"],
];

export default function SelectableTable() {
const [tableCols, updateCols] = useState(columns);
const [columnVisibility, setColumnVisibility] = useState({});
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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
}`} />
</div>

<a id="Paginated Table">
<h2>Paginated Table</h2>
</a>

<code>ResponsiveDataTable</code> from <code>@sistent/sistent</code> provides built-in pagination, column visibility, and responsive layout controls.

<div className="showcase">
<div className="items">
<ThemeWrapper>
<PaginatedTableDemo />
</ThemeWrapper>
</div>
<CodeBlock name="paginated-table" collapsible code={`import { useState, useEffect, useMemo } from "react";
import { ResponsiveDataTable } from "@sistent/sistent";

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",
]);

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 (
<ResponsiveDataTable
columns={columns}
data={data}
options={options}
tableCols={tableCols}
updateCols={updateCols}
columnVisibility={columnVisibility}
colViews={columnVisibility}
/>
);
}`} />
</div>
Loading
Loading