From 8a1b0d830b79534fc76117f02a170263887e963a Mon Sep 17 00:00:00 2001 From: Souradip Pal Date: Sat, 5 Apr 2025 10:39:01 +0000 Subject: [PATCH 1/2] [Components] Add Table component and update navigation links Signed-off-by: Souradip Pal --- src/components/SistentNavigation/content.js | 22 ++-- .../Projects/Sistent/components/content.js | 7 ++ .../Projects/Sistent/components/table/code.js | 101 +++++++++++++++ .../Sistent/components/table/guidance.js | 116 ++++++++++++++++++ .../Sistent/components/table/index.js | 108 ++++++++++++++++ 5 files changed, 345 insertions(+), 9 deletions(-) create mode 100644 src/sections/Projects/Sistent/components/table/code.js create mode 100644 src/sections/Projects/Sistent/components/table/guidance.js create mode 100644 src/sections/Projects/Sistent/components/table/index.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 50e7c8d0ff17a..20d61df41b2c1 100644 --- a/src/components/SistentNavigation/content.js +++ b/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" }, ]; diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index 82c1c140fa605..2468ffde4ff98 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/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 }; 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..28f435a334800 --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -0,0 +1,101 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} 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 + ` + + + + + Column 1 + Column 2 + + + + + Row 1 + Data 1 + + +
+ + ` +]; + +const TableCode = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + return ( + +
+ +

Table

+ +

+ To use the Table component from Layer5's Sistent design system, you begin by wrapping your table inside the TableContainer, which provides scrollability and styling. Inside it, the Table acts as the root element that holds the structure. The TableHead defines the table headers using a TableRow filled with TableCell elements for each column title. The TableBody follows, containing the actual data rows. Each data row is created using a TableRow, with individual data values placed inside corresponding TableCell elements. This modular structure allows for clean, accessible, and themable table layouts that integrate seamlessly into your UI. +

+ + {/* Navigation Tabs */} +
+ navigate("/projects/sistent/components/table")} + title="Overview" + /> + navigate("/projects/sistent/components/table/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/table/code")} + title="Code" + /> +
+ + {/* Basic Table */} +

Basic Table

+
+ + + + + + Column 1 + Column 2 + + + + + Row 1 + Data 1 + + +
+ + + +
+
+ + ); +}; + +export default TableCode; 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..22460976eb82b --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/guidance.js @@ -0,0 +1,116 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + Table, + TableHead, + TableBody, + TableRow, + TableCell, + TableContainer, +} 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(); + + return ( + +
+ +

Table

+ +

+ The Table component from the Sistent design system helps structure and display tabular data with accessibility and consistent styling in mind. It wraps MUI’s native table components to provide an enhanced and theme-friendly experience. +

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

How to Use

+ + +

Here’s a breakdown of each component used to construct a table:

+ +
    +
  • + TableContainer: Acts as a wrapper around the entire table. Useful for scrollability and border rounding. +
    • +
  • + Table: The root element that holds all rows and columns. +
    • +
  • + TableHead: Defines the header section of the table. Usually contains one TableRow with multiple TableCell elements as headers. +
    • +
  • + TableBody: Wraps all the dynamic content (rows of data). It follows the TableHead. +
    • +
  • + TableRow: Represents a single row inside either the head or body. It holds TableCell components. +
    • +
  • + TableCell: The actual data cell. Used inside both TableRow in the head and body. +
    • +
+ +

Below is a simple example of how these components come together:

+ + + + + + + Name + Age + City + + + + + John Doe + 28 + New York + + + Jane Smith + 34 + London + + +
+ + + +

+ You can customize the layout by applying conditional styles, using responsive wrappers, + or enhancing interactivity with row click handlers, sort functionality, etc. +

+
+
+ + ); +}; + +export default TableGuidance; 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..2bac3bca944d0 --- /dev/null +++ b/src/sections/Projects/Sistent/components/table/index.js @@ -0,0 +1,108 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + Table, + TableHead, + TableBody, + TableRow, + TableCell, + TableContainer, + 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 +const tableData = [ + { id: 1, name: "John Doe", age: 25, role: "Developer" }, + { id: 2, name: "Jane Smith", age: 28, role: "Designer" }, + { id: 3, name: "Sam Wilson", age: 30, role: "Manager" }, +]; + +const SistentTable = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Table

+ + + {/* 🔰 Introduction to Sistent Table */} +

+ The Table component in the Sistent design system is a wrapper + around MUI’s Table components, offering consistent styling and structure + aligned with Layer5’s UI philosophy. It helps developers display structured + data in a clean, responsive, and accessible way with minimal effort. +

+ + {/* Navigation Tabs */} +
+ navigate("/projects/sistent/components/table")} + title="Overview" + /> + navigate("/projects/sistent/components/table/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/table/code")} + title="Code" + /> +
+ + {/* Basic Table */} +
+ +

Basic Usage

+ +

A simple table displaying structured data with column headers and rows.

+ + + + + + + + ID + Name + Age + Role + + + + {tableData.map((row) => ( + + {row.id} + {row.name} + {row.age} + {row.role} + + ))} + +
+ + + +
+
+ + ); +}; + +export default SistentTable; From 9fe7f9c2bbe15c70c3104383c200a94fc47acb17 Mon Sep 17 00:00:00 2001 From: Souradip Pal Date: Sun, 13 Apr 2025 06:41:47 +0000 Subject: [PATCH 2/2] [Components] Replace Table component with ResponsiveDataTable for improved responsiveness and features Signed-off-by: Souradip Pal --- .../Projects/Sistent/components/table/code.js | 71 +++++++--------- .../Sistent/components/table/guidance.js | 80 +++++++++---------- .../Sistent/components/table/index.js | 72 ++++++++--------- 3 files changed, 102 insertions(+), 121 deletions(-) diff --git a/src/sections/Projects/Sistent/components/table/code.js b/src/sections/Projects/Sistent/components/table/code.js index 28f435a334800..1f6d33faf0947 100644 --- a/src/sections/Projects/Sistent/components/table/code.js +++ b/src/sections/Projects/Sistent/components/table/code.js @@ -3,12 +3,7 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, + ResponsiveDataTable } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import { CodeBlock } from "../button/code-block"; @@ -16,24 +11,21 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - // Basic Table - ` - - - - - Column 1 - Column 2 - - - - - Row 1 - Data 1 - - -
- + // Basic Table + ` + ` ]; @@ -48,7 +40,7 @@ const TableCode = () => {

Table

- To use the Table component from Layer5's Sistent design system, you begin by wrapping your table inside the TableContainer, which provides scrollability and styling. Inside it, the Table acts as the root element that holds the structure. The TableHead defines the table headers using a TableRow filled with TableCell elements for each column title. The TableBody follows, containing the actual data rows. Each data row is created using a TableRow, with individual data values placed inside corresponding TableCell elements. This modular structure allows for clean, accessible, and themable table layouts that integrate seamlessly into your UI. + 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.

{/* Navigation Tabs */} @@ -74,22 +66,19 @@ const TableCode = () => {

Basic Table

- - - - - Column 1 - Column 2 - - - - - Row 1 - Data 1 - - -
- +
diff --git a/src/sections/Projects/Sistent/components/table/guidance.js b/src/sections/Projects/Sistent/components/table/guidance.js index 22460976eb82b..15f99eb50dc58 100644 --- a/src/sections/Projects/Sistent/components/table/guidance.js +++ b/src/sections/Projects/Sistent/components/table/guidance.js @@ -3,12 +3,7 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider, - Table, - TableHead, - TableBody, - TableRow, - TableCell, - TableContainer, + ResponsiveDataTable } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; @@ -18,6 +13,24 @@ 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 (
@@ -25,7 +38,7 @@ const TableGuidance = () => {

Table

- The Table component from the Sistent design system helps structure and display tabular data with accessibility and consistent styling in mind. It wraps MUI’s native table components to provide an enhanced and theme-friendly experience. + The ResponsiveDataTable 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.

{/* Navigation Tabs */} @@ -52,60 +65,43 @@ const TableGuidance = () => {

How to Use

-

Here’s a breakdown of each component used to construct a table:

+

Here's a breakdown of the key properties of the ResponsiveDataTable component:

  • - TableContainer: Acts as a wrapper around the entire table. Useful for scrollability and border rounding. -
    • -
  • - Table: The root element that holds all rows and columns. + columns: An array of column configurations. Each column object requires a name and label property, and can have additional options for customization.
  • - TableHead: Defines the header section of the table. Usually contains one TableRow with multiple TableCell elements as headers. + data: A 2D array containing the table data. Each inner array represents a row of data.
  • - TableBody: Wraps all the dynamic content (rows of data). It follows the TableHead. + columnVisibility: An object mapping column names to boolean values to control which columns are displayed.
  • - TableRow: Represents a single row inside either the head or body. It holds TableCell components. + options: Additional configuration options for the table, such as pagination settings, row selection, and display options.
  • - TableCell: The actual data cell. Used inside both TableRow in the head and body. + rowsPerPageOptions: An array of numbers to set the options for rows per page in the pagination.
-

Below is a simple example of how these components come together:

+

Below is a simple example of how to use the ResponsiveDataTable component:

- - - - - Name - Age - City - - - - - John Doe - 28 - New York - - - Jane Smith - 34 - London - - -
- +

- You can customize the layout by applying conditional styles, using responsive wrappers, - or enhancing interactivity with row click handlers, sort functionality, etc. + 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.

diff --git a/src/sections/Projects/Sistent/components/table/index.js b/src/sections/Projects/Sistent/components/table/index.js index 2bac3bca944d0..04acf74a058d0 100644 --- a/src/sections/Projects/Sistent/components/table/index.js +++ b/src/sections/Projects/Sistent/components/table/index.js @@ -2,12 +2,7 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { - Table, - TableHead, - TableBody, - TableRow, - TableCell, - TableContainer, + ResponsiveDataTable, SistentThemeProvider, } from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; @@ -15,13 +10,27 @@ import { SistentLayout } from "../../sistent-layout"; import { Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -// Sample table data -const tableData = [ - { id: 1, name: "John Doe", age: 25, role: "Developer" }, - { id: 2, name: "Jane Smith", age: 28, role: "Designer" }, - { id: 3, name: "Sam Wilson", age: 30, role: "Manager" }, +// 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(); @@ -35,10 +44,10 @@ const SistentTable = () => { {/* 🔰 Introduction to Sistent Table */}

- The Table component in the Sistent design system is a wrapper - around MUI’s Table components, offering consistent styling and structure - aligned with Layer5’s UI philosophy. It helps developers display structured - data in a clean, responsive, and accessible way with minimal effort. + The ResponsiveDataTable 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.

{/* Navigation Tabs */} @@ -71,32 +80,19 @@ const SistentTable = () => {

Basic Usage

 -

A simple table displaying structured data with column headers and rows.

+

A responsive data table displaying structured data with built-in features.

- - - - - ID - Name - Age - Role - - - - {tableData.map((row) => ( - - {row.id} - {row.name} - {row.age} - {row.role} - - ))} - -
- +