From 022e1f177610143fb0d6b0d39eeab50cb4ed79f1 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Tue, 21 Oct 2025 23:34:38 +0530 Subject: [PATCH 01/12] feat(sistent): add Table to SistentNavigation Signed-off-by: Naik Mubashir --- src/components/SistentNavigation/content.js | 35 +++++++++++---------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 440cb86b4eb17..8f66071fc037d 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -99,26 +99,27 @@ export const content = [ { id: 69, link: "/projects/sistent/components/switch/guidance", text: "Switch" }, { id: 70, link: "/projects/sistent/components/switch/code", text: "Switch" }, - { id: 71, link: "/projects/sistent/components/tabs", text: "Tabs" }, - { id: 72, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" }, - { id: 73, link: "/projects/sistent/components/tabs/code", text: "Tabs" }, + { id: 71, link: "/projects/sistent/components/table", text: "Table" }, + { id: 72, link: "/projects/sistent/components/table/guidance", text: "Table" }, + { id: 73, link: "/projects/sistent/components/table/code", text: "Table" }, - { id: 74, link: "/projects/sistent/components/text-field", text: "Text Field" }, - { id: 75, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" }, - { id: 76, link: "/projects/sistent/components/text-field/code", text: "Text Field" }, + { id: 74, link: "/projects/sistent/components/tabs", text: "Tabs" }, + { id: 75, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" }, + { id: 76, link: "/projects/sistent/components/tabs/code", text: "Tabs" }, - { id: 77, link: "/projects/sistent/components/text-input", text: "Text Input" }, - { id: 78, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" }, - { id: 79, link: "/projects/sistent/components/text-input/code", text: "Text Input" }, - - { id: 80, link: "/projects/sistent/components/toolbar", text: "Toolbar" }, - { id: 81, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" }, - { id: 82, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" }, - - { id: 83, link: "/projects/sistent/components/tooltip", text: "Tooltip" }, - { id: 84, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" }, - { id: 85, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" }, + { id: 77, link: "/projects/sistent/components/text-field", text: "Text Field" }, + { id: 78, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" }, + { id: 79, link: "/projects/sistent/components/text-field/code", text: "Text Field" }, + { id: 80, link: "/projects/sistent/components/text-input", text: "Text Input" }, + { id: 81, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" }, + { id: 82, link: "/projects/sistent/components/text-input/code", text: "Text Input" }, + { id: 83, link: "/projects/sistent/components/toolbar", text: "Toolbar" }, + { id: 84, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" }, + { id: 85, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" }, + { id: 86, link: "/projects/sistent/components/tooltip", text: "Tooltip" }, + { id: 87, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" }, + { id: 88, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" }, ]; From 1cbbeecb6da10f8e7e170735e5e5b39d59a03020 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Tue, 21 Oct 2025 23:40:37 +0530 Subject: [PATCH 02/12] feat(sistent): add Table to component documentation Signed-off-by: Naik Mubashir --- .../Sistent/components/table/index.js | 257 ++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 src/sections/Projects/Sistent/components/table/index.js diff --git a/src/sections/Projects/Sistent/components/table/index.js b/src/sections/Projects/Sistent/components/table/index.js new file mode 100644 index 0000000000000..a2f27c5f506c5 --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/index.js @@ -0,0 +1,257 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, ResponsiveDataTable } from "@sistent/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentTable = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + // Sample data for demonstration + const sampleData = [ + { + id: 1, + name: "John Doe", + role: "Software Engineer", + location: "New York", + startDate: "2023-01-15", + }, + { + id: 2, + name: "Jane Smith", + role: "Product Manager", + location: "San Francisco", + startDate: "2022-08-22", + }, + { + id: 3, + name: "Mike Johnson", + role: "Designer", + location: "Austin", + startDate: "2023-03-10", + }, + { + id: 4, + name: "Sarah Wilson", + role: "Data Scientist", + location: "Seattle", + startDate: "2022-11-05", + }, + ]; + + const sampleColumns = [ + { + name: "id", + label: "ID", + options: { + filter: false, + sort: true, + searchable: false, + }, + }, + { + name: "name", + label: "Name", + options: { + filter: true, + sort: true, + searchable: true, + }, + }, + { + name: "role", + label: "Role", + options: { + filter: true, + sort: true, + searchable: true, + }, + }, + { + name: "location", + label: "Location", + options: { + filter: true, + sort: true, + searchable: true, + }, + }, + { + name: "startDate", + label: "Start Date", + options: { + filter: false, + sort: true, + searchable: false, + }, + }, + ]; + + // Responsive column configuration + const sampleColViews = [ + ["id", "xs"], + ["name", "xs"], + ["role", "sm"], + ["location", "md"], + ["startDate", "lg"], + ]; + + const [sampleTableCols, updateSampleCols] = useState(sampleColumns); + const [sampleColumnVisibility] = useState(() => { + const initialVisibility = {}; + sampleColumns.forEach((col) => { + initialVisibility[col.name] = true; + }); + return initialVisibility; + }); + + const basicOptions = { + responsive: "simple", + selectableRows: "none", + elevation: 0, + search: false, + filter: false, + viewColumns: false, + print: false, + download: false, + }; + + return ( + +
+ +

Table

+ +

+ Table components provide a flexible way to display tabular data with + features like sorting, filtering, pagination, and responsive design. +

+
+ navigate("/projects/sistent/components/table")} + title="Overview" + /> + + navigate("/projects/sistent/components/table/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/table/code")} + title="Code" + /> +
+
+

+ Tables organize and display data in rows and columns, making it easy + for users to scan, compare, and analyze information efficiently. +

+ +

Types

+ +

+ Tables come in different variants to accommodate various data + presentation needs and interface requirements. +

+

Basic Table

+

+ A simple table displays data in rows and columns with minimal + styling, perfect for straightforward data presentation. +

+ + + + + + + +

Responsive Table

+

+ Responsive tables adapt to different screen sizes, providing optimal + viewing experience across devices. +

+ +

Features

+ +

+ Tables support various features to enhance data interaction and user + experience. +

+

Sorting

+

+ Enable column sorting to allow users to organize data in ascending + or descending order based on column values. +

+

Filtering

+

+ Built-in search and filtering capabilities help users quickly find + specific data within large datasets. +

+

Pagination

+

+ Pagination controls manage large datasets by dividing content into + manageable chunks with navigation controls. +

+ +

Accessibility

+ +

+ Tables include accessibility features to ensure they're usable by + all users, including those with assistive technologies. +

+

Essential Properties

+
    +
  • + Keyboard navigation: Full keyboard support for + navigating table content +
    • +
  • + Screen reader support: Proper table structure + with headers and labels +
    • +
  • + Focus management: Clear focus indicators for + interactive elements +
    • +
  • + ARIA labels: Descriptive labels for complex table + functionality +
    • +
+
+
+ + ); +}; + +export default SistentTable; From bba7b3156dbcf78c79f85e54b900c0155e473b96 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Tue, 21 Oct 2025 23:42:56 +0530 Subject: [PATCH 03/12] feat(sistent): add Table usage guidance and best practices Signed-off-by: Naik Mubashir --- .../Sistent/components/table/guidance.js | 261 ++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 src/sections/Projects/Sistent/components/table/guidance.js diff --git a/src/sections/Projects/Sistent/components/table/guidance.js b/src/sections/Projects/Sistent/components/table/guidance.js new file mode 100644 index 0000000000000..3bd73b6779158 --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/guidance.js @@ -0,0 +1,261 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; + +const TableGuidance = () => { + const location = useLocation(); + + return ( + +
+ +

Table

+ +

+ Table components provide a flexible way to display tabular data with + features like sorting, filtering, pagination, and responsive design. +

+
+ navigate("/projects/sistent/components/table")} + title="Overview" + /> + + navigate("/projects/sistent/components/table/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/table/code")} + title="Code" + /> +
+
+ +

Usage Guidelines

+ +

+ Tables should be used when you need to display structured data in + rows and columns, making it easy to compare and analyze information. +

+ +

When to Use Tables

+
    +
  • + Structured data: Displaying data with clear + relationships between columns +
    • +
  • + Comparison needs: When users need to compare + values across multiple entries +
    • +
  • + Large datasets: Managing and displaying + substantial amounts of data +
    • +
+ +

When to Avoid Tables

+
    +
  • + Simple lists: Use basic lists for single-column + data +
    • +
  • + Layout purposes: Never use tables for page layout + structure +
    • +
  • + Complex hierarchies: Consider tree views for + nested data +
    • +
+ + +

Design Guidelines

+ + +

Data Organization

+
    +
  • + Logical column order: Arrange columns in order of + importance or workflow +
    • +
  • + Consistent data types: Keep similar data types in + the same column +
    • +
  • + Clear headers: Use descriptive, concise column + headers +
    • +
+ +

Visual Design

+
    +
  • + Adequate spacing: Provide sufficient padding for + readability +
    • +
  • + Row separation: Use alternating colors or borders + for clarity +
    • +
  • + Alignment: Align text left, numbers right, and + center for icons +
    • +
+ + +

Accessibility Best Practices

+ + +

Essential Requirements

+
    +
  • + Table headers: Always provide proper table + headers using th elements +
    • +
  • + Caption text: Include descriptive captions for + complex tables +
    • +
  • + Keyboard navigation: Ensure full keyboard + accessibility for all features +
    • +
+ + +

Performance Considerations

+ + +

+ For large datasets, implement pagination, virtual scrolling, or lazy + loading to maintain optimal performance. +

+ + +

Props

+ +

+ The ResponsiveDataTable component accepts various props to customize + functionality and appearance: +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefaultDescription
dataobject[] | string[][]-The data to display in the table (objects with named properties or arrays)
columnsMUIDataTableColumn[]-Column definitions with name, label, and options properties
optionsMUIDataTableOptions{}Configuration options for table behavior (search, filter, pagination, etc.)
rowsPerPageOptionsnumber[][10, 25, 50, 100]Available options for rows per page dropdown
colViewsColView[]-Responsive column visibility settings
tableColsMUIDataTableColumn[]-Current table columns state
updateColsfunction-Callback function to update table columns
columnVisibilityRecord<string, boolean>-Controls which columns are visible on different screen sizes
+
+ + +

Best Practices

+ +
    +
  • + Consistent formatting: Maintain consistent data + formatting within columns +
    • +
  • + Progressive disclosure: Show essential columns + first, allow users to reveal more +
    • +
  • + Loading states: Provide clear loading indicators + for data fetching +
    • +
  • + Error handling: Display helpful error messages + when data fails to load +
    • +
  • + Empty states: Show meaningful messages when no + data is available +
    • +
+
+
+ + ); +}; + +export default TableGuidance; From 1a8f7c95c7623568f59dd55434ef69ac10982840 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Tue, 21 Oct 2025 23:43:45 +0530 Subject: [PATCH 04/12] feat(sistent): add Table interative code examples Signed-off-by: Naik Mubashir --- .../Projects/Sistent/components/table/code.js | 384 ++++++++++++++++++ 1 file changed, 384 insertions(+) create mode 100644 src/sections/Projects/Sistent/components/table/code.js diff --git a/src/sections/Projects/Sistent/components/table/code.js b/src/sections/Projects/Sistent/components/table/code.js new file mode 100644 index 0000000000000..70f2541cd364b --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -0,0 +1,384 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { ResponsiveDataTable, SistentThemeProvider } from "@sistent/sistent"; +import { CodeBlock } from "../button/code-block"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + `, + ` + + `, + ` + + `, + ` + + `, +]; + +const TableCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + // Sample data + const basicData = [ + { + id: 1, + name: "John Doe", + role: "Software Engineer", + location: "New York", + }, + { + id: 2, + name: "Jane Smith", + role: "Product Manager", + location: "San Francisco", + }, + { id: 3, name: "Mike Johnson", role: "Designer", location: "Austin" }, + ]; + + const employeeData = [ + { + id: 1, + name: "Alice Brown", + role: "Senior Developer", + location: "Seattle", + startDate: "2020-03-15", + }, + { + id: 2, + name: "Bob Wilson", + role: "Data Analyst", + location: "Portland", + startDate: "2021-07-22", + }, + { + id: 3, + name: "Carol Davis", + role: "UX Designer", + location: "Denver", + startDate: "2022-01-10", + }, + { + id: 4, + name: "David Miller", + role: "DevOps Engineer", + location: "Chicago", + startDate: "2019-11-08", + }, + { + id: 5, + name: "Emma Wilson", + role: "Marketing Lead", + location: "Miami", + startDate: "2021-05-12", + }, + { + id: 6, + name: "Frank Taylor", + role: "Sales Manager", + location: "Dallas", + startDate: "2020-09-18", + }, + { + id: 7, + name: "Grace Lee", + role: "HR Specialist", + location: "Boston", + startDate: "2022-02-28", + }, + ]; + + // Column definitions + const columns = [ + { + name: "id", + label: "ID", + options: { filter: false, sort: true, searchable: false }, + }, + { + name: "name", + label: "Name", + options: { filter: true, sort: true, searchable: true }, + }, + { + name: "role", + label: "Role", + options: { filter: true, sort: true, searchable: true }, + }, + { + name: "location", + label: "Location", + options: { filter: true, sort: true, searchable: true }, + }, + { + name: "startDate", + label: "Start Date", + options: { + filter: false, + sort: true, + searchable: false, + sortDescFirst: true, + }, + }, + ]; + + // Separate column configs for different tables + const basicColumns = columns.slice(0, 4); + const employeeColumns = columns; + + // Responsive configurations + const basicColViews = [ + ["id", "xs"], + ["name", "xs"], + ["role", "sm"], + ["location", "md"], + ]; + const employeeColViews = [...basicColViews, ["startDate", "lg"]]; + + // State management + const [tableCols, updateCols] = useState(columns); + const [columnVisibility] = useState(() => { + const visibility = {}; + columns.forEach((col) => { + visibility[col.name] = true; + }); + return visibility; + }); + + // Table options + const commonOptions = { + elevation: 0, + print: false, + download: false, + viewColumns: false, + }; + + const basicOptions = { + ...commonOptions, + search: false, + filter: false, + responsive: "simple", + selectableRows: "none", + }; + + const featuredOptions = { + ...commonOptions, + search: true, + filter: true, + responsive: "standard", + selectableRows: "multiple", + pagination: true, + rowsPerPage: 5, + rowsPerPageOptions: [5, 10, 25], + }; + + const paginatedOptions = { + ...commonOptions, + search: true, + filter: true, + responsive: "standard", + selectableRows: "none", + pagination: true, + rowsPerPage: 3, + rowsPerPageOptions: [3, 5, 10], + }; + + const responsiveOptions = { + ...commonOptions, + search: false, + filter: false, + responsive: "standard", + selectableRows: "none", + }; + + return ( + +
+ +

Table

+ +

+ Table components provide a flexible way to display tabular data with + features like sorting, filtering, pagination, and responsive design. +

+
+ navigate("/projects/sistent/components/table")} + title="Overview" + /> + + navigate("/projects/sistent/components/table/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/table/code")} + title="Code" + /> +
+
+

+ ResponsiveDataTable provides a powerful way to display and interact + with tabular data, offering built-in features for enhanced user + experience. +

+ +

Basic Table

+ +

+ A simple table displays data in rows and columns with minimal + configuration required. +

+
+
+ + + +
+ +
+ + +

Table with Features

+ +

+ Enhanced table with multiple selection, search, filtering, and + sorting capabilities enabled. +

+
+
+ + + +
+ +
+ + +

+ Tables can handle large datasets efficiently with built-in + pagination and search functionality. +

+
+
+ + + +
+ +
+ + +

Responsive Behavior

+ +

+ Tables automatically adapt to different screen sizes, providing + optimal viewing experience across devices. +

+
+
+ + + +
+ +
+
+
+ + ); +}; + +export default TableCode; From aa6b67c9edc85115d5347bf1c0b04f65ff920b28 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Tue, 21 Oct 2025 23:44:57 +0530 Subject: [PATCH 05/12] feat(sistent): add Table to components data list Signed-off-by: Naik Mubashir --- src/sections/Projects/Sistent/components/content.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index a081d86cd878a..dcfc09ef1f389 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -223,6 +223,13 @@ const componentsData = [ url: "/projects/sistent/components/iconbutton", src: "/iconbutton", }, + { + id: 30, + name: "Table", + description: "Table components provide a flexible and feature-rich way to display tabular data with sorting, filtering, pagination, and responsive design capabilities.", + url: "/projects/sistent/components/table", + src: "/table", + }, ]; module.exports = { componentsData }; From 11a1617976f45a569a12747ff08daee73ccd8338 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Wed, 22 Oct 2025 11:28:48 +0530 Subject: [PATCH 06/12] fix(sistent): fix eslint errors in SistentNavigation Signed-off-by: Naik Mubashir --- src/components/SistentNavigation/content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index daf0b4e9af718..e9bd8511066a6 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -98,11 +98,11 @@ export const content = [ { id: 68, link: "/projects/sistent/components/stepper", text: "Stepper" }, { id: 69, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" }, { id: 70, link: "/projects/sistent/components/stepper/code", text: "Stepper" }, - + { id: 71, link: "/projects/sistent/components/switch", text: "Switch" }, { id: 72, link: "/projects/sistent/components/switch/guidance", text: "Switch" }, { id: 73, link: "/projects/sistent/components/switch/code", text: "Switch" }, - + { id: 74, link: "/projects/sistent/components/table", text: "Table" }, { id: 75, link: "/projects/sistent/components/table/guidance", text: "Table" }, { id: 76, link: "/projects/sistent/components/table/code", text: "Table" }, From 13e39bff9f703f273b9b9bda2c562f08789fd9ef Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Thu, 30 Oct 2025 04:26:43 +0530 Subject: [PATCH 07/12] fix(sistent): fix new updates Signed-off-by: Naik Mubashir --- .../Projects/Sistent/components/table/code.js | 43 ------------------- 1 file changed, 43 deletions(-) diff --git a/src/sections/Projects/Sistent/components/table/code.js b/src/sections/Projects/Sistent/components/table/code.js index 70f2541cd364b..3fde9fa970436 100644 --- a/src/sections/Projects/Sistent/components/table/code.js +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -43,17 +43,6 @@ const codes = [ columnVisibility={columnVisibility} /> `, - ` - - `, ]; const TableCode = () => { @@ -224,14 +213,6 @@ const TableCode = () => { rowsPerPageOptions: [3, 5, 10], }; - const responsiveOptions = { - ...commonOptions, - search: false, - filter: false, - responsive: "standard", - selectableRows: "none", - }; - return (
@@ -351,30 +332,6 @@ const TableCode = () => {
- - -

Responsive Behavior

- -

- Tables automatically adapt to different screen sizes, providing - optimal viewing experience across devices. -

-
-
- - - -
- -
From b6dc27500da39e08ba938b5de8f9485d0de8b008 Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Mon, 3 Nov 2025 23:07:00 +0530 Subject: [PATCH 08/12] fix: update code.js Signed-off-by: Naik Mubashir --- src/sections/Projects/Sistent/components/table/code.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/components/table/code.js b/src/sections/Projects/Sistent/components/table/code.js index 3fde9fa970436..d334a47ee719f 100644 --- a/src/sections/Projects/Sistent/components/table/code.js +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -216,7 +216,7 @@ const TableCode = () => { return (
- +

Table

@@ -261,7 +261,7 @@ const TableCode = () => { with tabular data, offering built-in features for enhanced user experience.

- +

Basic Table

@@ -285,7 +285,7 @@ const TableCode = () => {

- +

Table with Features

@@ -309,7 +309,7 @@ const TableCode = () => { -

From ef450e0e3267eac1cc41eac23048c594c2d808ca Mon Sep 17 00:00:00 2001 From: Naik Mubashir Date: Mon, 3 Nov 2025 23:53:03 +0530 Subject: [PATCH 09/12] fix(sistent): prevent SSR issues with Table component rendering Added client-side mounting check to ResponsiveDataTable components to fix Gatsby static HTML build failure. The MUI theme.alpha function was causing errors during SSR. Tables now only render after component mounts in browser. Signed-off-by: Naik Mubashir --- .../Projects/Sistent/components/table/code.js | 80 +++++++++++-------- 1 file changed, 46 insertions(+), 34 deletions(-) diff --git a/src/sections/Projects/Sistent/components/table/code.js b/src/sections/Projects/Sistent/components/table/code.js index d334a47ee719f..be07366045245 100644 --- a/src/sections/Projects/Sistent/components/table/code.js +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; @@ -48,6 +48,12 @@ const codes = [ const TableCode = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); + const [isMounted, setIsMounted] = useState(false); + + // Prevent SSR issues with MUI components + useEffect(() => { + setIsMounted(true); + }, []); // Sample data const basicData = [ @@ -270,17 +276,19 @@ const TableCode = () => {

- - - + {isMounted && ( + + + + )}
@@ -294,17 +302,19 @@ const TableCode = () => {

- - - + {isMounted && ( + + + + )}
@@ -318,17 +328,19 @@ const TableCode = () => {

- - - + {isMounted && ( + + + + )}
From e5dfe993ef8e0a6973f155463f870e301be390c0 Mon Sep 17 00:00:00 2001 From: l5io Date: Sun, 7 Dec 2025 02:08:05 +0000 Subject: [PATCH 10/12] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index c776453f50141..d216e3991956e 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -429,7 +429,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/kanvas/designer/whiteboarding/#step-3-utilizing-whiteboard-tools" }, { "theme": "", @@ -1181,7 +1181,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/self-hosted/planning/peer-to-peer-communication/" }, { "theme": "", From b311a47b1cd3a1c9a7154a219e8e93f0f40b2057 Mon Sep 17 00:00:00 2001 From: l5io Date: Sat, 24 Jan 2026 02:03:13 +0000 Subject: [PATCH 11/12] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index d216e3991956e..a0694dc241836 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -621,7 +621,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "https://docs.layer5.io/kanvas/operator/operator-views/" + "docs": "https://docs.layer5.io/kanvas/operator/views/" }, { "theme": "", From e76c3e2ad14ccff1f43ffa7db7f66d28a80e28fb Mon Sep 17 00:00:00 2001 From: l5io Date: Tue, 27 Jan 2026 02:14:11 +0000 Subject: [PATCH 12/12] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index a0694dc241836..026149abc2f1c 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -29,7 +29,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/kanvas/#what-is-kanvas" }, { "theme": "", @@ -109,7 +109,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/kanvas/designer/comments/" }, { "theme": "", @@ -493,7 +493,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.meshery.io/guides/performance-management/managing-performance#performance-profiles" }, { "theme": "", @@ -509,7 +509,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.meshery.io/guides/performance-management/interpreting-performance-test-results" }, { "theme": "", @@ -525,7 +525,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.meshery.io/guides/performance-management/managing-performance#configuring-performance-testing-settings" }, { "theme": "", @@ -1085,7 +1085,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/getting-started/support/#contacting-support" }, { "theme": "", @@ -1101,7 +1101,7 @@ "teamOperator": "x", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/getting-started/support/#contacting-support" }, { "theme": "", @@ -1117,7 +1117,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/self-hosted/white-labeling/" }, { "theme": "", @@ -1133,7 +1133,7 @@ "teamOperator": "", "enterprise": "x" }, - "docs": "" + "docs": "https://docs.layer5.io/cloud/getting-started/support/#contacting-support" }, { "theme": "",