[Components] Add Table component and update navigation links

src/components/SistentNavigation/content.js

@@ -59,15 +59,19 @@ export const content = [
   { id: 41, link: "/projects/sistent/components/select/guidance", text: "Select" },
   { id: 42, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 43, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 44, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 45, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 43, link: "/projects/sistent/components/table", text: "Table" },
+  { id: 44, link: "/projects/sistent/components/table/guidance", text: "Table" },
+  { id: 45, link: "/projects/sistent/components/table/code", text: "Table" },
 
-  { id: 46, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 47, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 48, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 46, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 47, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 48, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 49, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 50, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 51, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 49, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 50, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 51, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+
+  { id: 52, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 52, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 53, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 ];

src/sections/Projects/Sistent/components/content.js

@@ -126,6 +126,13 @@ const componentsData = [
     url: "/projects/sistent/components/icons",
     src: "/icons"
   },
+  {
+    id: 17,
+    name: "Table",
+    description: "The Table component provides structured data representation.",
+    url: "/projects/sistent/components/table",
+    src: "/table"
+  }
 ];
 
 module.exports = { componentsData };

src/sections/Projects/Sistent/components/table/code.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import {
+  SistentThemeProvider,
+  ResponsiveDataTable
+} from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import { CodeBlock } from "../button/code-block";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  // Basic Table
+  `
+      <ResponsiveDataTable
+        columns={[
+          { name: "column1", label: "Column 1" },
+          { name: "column2", label: "Column 2" }
+        ]}
+        data={[
+          ["Row 1", "Data 1"]
+        ]}
+        columnVisibility={{
+          column1: true,
+          column2: true
+        }}
+      />
+    `
+];
+
+const TableCode = () => {
+  const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Table">
+      <div className="content">
+        <a id="Identity">
+          <h2>Table</h2>
+        </a>
+        <p>
+          To use the ResponsiveDataTable component from Layer5's Sistent design system, you need to provide columns configuration, data, and column visibility settings. The columns configuration defines each column's display properties, while the data array contains the actual table content. The responsive table provides advanced features like sorting, pagination, and customizable cell rendering, creating a powerful and accessible data display solution that adapts to different screen sizes.
+        </p>
+
+        {/* Navigation Tabs */}
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table/code")}
+            title="Code"
+          />
+        </div>
+
+        {/* Basic Table */}
+        <h3>Basic Table</h3>
+        <div className="showcase">
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <ResponsiveDataTable
+              columns={[
+                { name: "column1", label: "Column 1" },
+                { name: "column2", label: "Column 2" }
+              ]}
+              data={[
+                ["Row 1", "Data 1"]
+              ]}
+              columnVisibility={{
+                column1: true,
+                column2: true
+              }}
+            />
+          </SistentThemeProvider>
+          <CodeBlock name="basic-table" code={codes[0]} />
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default TableCode;

src/sections/Projects/Sistent/components/table/guidance.js

@@ -0,0 +1,112 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import {
+  SistentThemeProvider,
+  ResponsiveDataTable
+} from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const TableGuidance = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  // Sample columns and data for the example
+  const columns = [
+    { name: "name", label: "Name" },
+    { name: "age", label: "Age" },
+    { name: "city", label: "City" }
+  ];
+
+  const data = [
+    ["John Doe", "28", "New York"],
+    ["Jane Smith", "34", "London"]
+  ];
+
+  const columnVisibility = {
+    name: true,
+    age: true,
+    city: true
+  };
+
+  return (
+    <SistentLayout title="Table">
+      <div className="content">
+        <a id="Identity">
+          <h2>Table</h2>
+        </a>
+        <p>
+          The <code>ResponsiveDataTable</code> component from the Sistent design system provides a powerful solution for displaying tabular data with built-in responsiveness, sorting, filtering, and pagination capabilities. It's designed to display data in a way that adapts to different screen sizes while maintaining accessibility and consistent styling.
+        </p>
+
+        {/* Navigation Tabs */}
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/table/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/table/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <a id="BasicTable">
+            <h2>How to Use</h2>
+          </a>
+
+          <p>Here's a breakdown of the key properties of the ResponsiveDataTable component:</p>
+
+          <ul>
+            <li>
+              <strong>columns</strong>: An array of column configurations. Each column object requires a name and label property, and can have additional options for customization.
+            </li>
+            <li>
+              <strong>data</strong>: A 2D array containing the table data. Each inner array represents a row of data.
+            </li>
+            <li>
+              <strong>columnVisibility</strong>: An object mapping column names to boolean values to control which columns are displayed.
+            </li>
+            <li>
+              <strong>options</strong>: Additional configuration options for the table, such as pagination settings, row selection, and display options.
+            </li>
+            <li>
+              <strong>rowsPerPageOptions</strong>: An array of numbers to set the options for rows per page in the pagination.
+            </li>
+          </ul>
+
+          <p>Below is a simple example of how to use the ResponsiveDataTable component:</p>
+
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <ResponsiveDataTable
+              columns={columns}
+              data={data}
+              columnVisibility={columnVisibility}
+              options={{
+                elevation: 0,
+                responsive: "standard"
+              }}
+            />
+          </SistentThemeProvider>
+
+          <p>
+            You can customize your table by setting additional options, creating custom cell renderers,
+            adding action columns, implementing custom filtering, and more, based on your specific requirements.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default TableGuidance;

src/sections/Projects/Sistent/components/table/index.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import {
+  ResponsiveDataTable,
+  SistentThemeProvider,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+// Sample table data and columns configuration
+const columns = [
+  { name: "id", label: "ID" },
+  { name: "name", label: "Name" },
+  { name: "age", label: "Age" },
+  { name: "role", label: "Role" }
+];
+
+const data = [
+  ["1", "John Doe", "25", "Developer"],
+  ["2", "Jane Smith", "28", "Designer"],
+  ["3", "Sam Wilson", "30", "Manager"]
+];
+
+const columnVisibility = {
+  id: true,
+  name: true,
+  age: true,
+  role: true
+};
+
+const SistentTable = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Table">
+      <div className="content">
+        <a id="Identity">
+          <h2>Table</h2>
+        </a>
+
+        {/* 🔰 Introduction to Sistent Table */}
+        <p>
+          The <code>ResponsiveDataTable</code> component in the Sistent design system provides
+          a powerful solution for displaying tabular data with built-in responsiveness,
+          sorting, filtering, and pagination capabilities. It's designed to display structured
+          data in a clean, accessible way that adapts to different screen sizes.
+        </p>
+
+        {/* Navigation Tabs */}
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/table" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/table")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/table/guidance" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/table/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/table/code" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/table/code")}
+            title="Code"
+          />
+        </div>
+
+        {/* Basic Table */}
+        <div className="main-content">
+          <a id="Basic Usage">
+            <h2>Basic Usage</h2>
+          </a>
+          <p>A responsive data table displaying structured data with built-in features.</p>
+
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <ResponsiveDataTable
+                columns={columns}
+                data={data}
+                columnVisibility={columnVisibility}
+                options={{
+                  elevation: 0,
+                  responsive: "standard"
+                }}
+              />
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentTable;