pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/TableTree/Components/TableRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TableRowProps } from '../types';
+import TableCell from './TableCell';
+
+const TableRow = React.memo(
+  ({
+    node,
+    level,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableRowProps) => (
+    <tr
+      data-level={level}
+      className="show"
+      onClick={(e) => onRowClick(e, node)}
+    >
+      {columnsData.map((col) => (
+        <TableCell
+          key={col.name}
+          col={col}
+          node={node}
+          level={level}
+          selected={selected}
+          select={select}
+          onCheckBoxChange={onCheckBoxChange}
+          onToggleExpand={onToggleExpand}
+        />
+      ))}
+    </tr>
+  )
+);
+
+export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -1,8 +1,3 @@
-html,
-* {
-  font-family: 'Open Sans';
-}
-
 .tree-table-space-block {
   display: inline-block;
   width: 20px;
@@ -39,6 +34,14 @@ html,
 .tree-table-wrap {
   width: 100%;
 }
+thead{
+  position: sticky;
+  top: 12px;
+}
+
+tbody{
+  overflow: scroll;
+}
 
 .tree-table {
   border: 1px solid #f1f1f1;

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,13 @@ import { prepareData } from '../../utils/TableCell/TableCell';
 import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
 import Checkbox from '../Checkbox';
 import RadioButton from '../RadioButton';
-import { TreeTableProps } from './types';
+import {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRowProps,
+  TreeTableProps,
+} from './types';
 
 // Helper to render spaces for levels
 const renderSpaces = (level: number) =>
@@ -32,27 +38,17 @@ const TableCell = React.memo(
     col,
     node,
     level,
-    isExpanded,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-  }: {
-    col: any;
-    node: any;
-    level: number;
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onCheckBoxChange: (type: string, node: any) => void;
-    onToggleExpand: (node: any) => void;
-  }) => (
+  }: TableCellProps) => (
     <td>
       {col.isTree && renderSpaces(level + 1)}
       {col.isTree && (
         <span
           className={`tree-table-space-block last-block  ${
-            isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
           } ${node.folder ? '' : 'no-folder'}`}
           onClick={() => onToggleExpand(node)}
         >
@@ -89,23 +85,12 @@ const TableRow = React.memo(
     node,
     level,
     columnsData,
-    isExpanded,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    node: any;
-    level: number;
-    columnsData: any[];
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableRowProps) => (
     <tr
       data-level={level}
       className="show"
@@ -117,7 +102,6 @@ const TableRow = React.memo(
           col={col}
           node={node}
           level={level}
-          isExpanded={isExpanded}
           selected={selected}
           select={select}
           onCheckBoxChange={onCheckBoxChange}
@@ -129,7 +113,7 @@ const TableRow = React.memo(
 );
 
 // Component: TableHead
-const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   const hasDefaultValues = useMemo(
     () => columnsData.some(({ defaultValue }) => !!defaultValue),
     [columnsData]
@@ -169,32 +153,20 @@ const TableBody = React.memo(
   ({
     flattenedTreeData,
     columnsData,
-    expandedNodes,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    flattenedTreeData: any[];
-    columnsData: any[];
-    expandedNodes: string[];
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableBodyProps) => (
     <tbody>
       {flattenedTreeData.map(({ node, level }) => {
-        const isExpanded = expandedNodes.includes(node?.id);
         return (
           <TableRow
             key={node.id}
             node={node}
             level={level}
             columnsData={columnsData}
-            isExpanded={isExpanded}
             selected={selected}
             select={select}
             onRowClick={onRowClick}
@@ -215,12 +187,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
   select = null,
   onChange,
   onClick,
-  expandedNodes = [],
   onExpand,
 }) => {
   const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(!expandedNodes.includes(node?.id), node?.id),
-    [expandedNodes, onExpand]
+    (node: any) => onExpand?.(true, node?.id),
+    [onExpand]
   );
 
   const handleCheckBoxChange = useCallback(
@@ -228,7 +199,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
       const nodeId = node.id;
 
       if (type === 'radio') {
-        onChange?.([nodeId]);
+        onChange?.('true', [nodeId]);
       } else {
         let updatedSelected = [...selected];
 
@@ -242,7 +213,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
           );
         }
 
-        onChange?.(updatedSelected);
+        onChange?.('true', updatedSelected);
       }
     },
     [selected, treeData, onChange]
@@ -260,7 +231,6 @@ const TreeTable: React.FC<TreeTableProps> = ({
         <TableBody
           flattenedTreeData={treeData}
           columnsData={columnsData}
-          expandedNodes={expandedNodes}
           selected={selected}
           select={select}
           onRowClick={handleRowClick}

package/src/components/TableTree/Utils/getAllChildIds.ts

@@ -0,0 +1,12 @@
+const getAllChildIds = (nodeId: string, data: any[]): string[] => {
+  let result = [nodeId];
+
+  // Traverse the tree and find children based on parentId
+  data.forEach(({ node }) => {
+    if (node.parentId === nodeId) {
+      result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
+    }
+  });
+
+  return result;
+};

package/src/components/TableTree/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface TreeNode {
   key: string;
   [key: string]: any;
@@ -5,16 +7,53 @@ export interface TreeNode {
   expanded?: boolean;
 }
 
+declare type JSX = ReactNode | JSX.Element[] | string | null;
+
+export interface TableCellProps {
+  col: any;
+  node: any;
+  level: number;
+  selected: string[];
+  select: string | null;
+  onCheckBoxChange: (type: string, node: any) => void;
+  onToggleExpand: (node: any) => void;
+}
+
+export interface TableHeadProps {
+  columnsData: any[];
+}
+
+export interface TableBodyProps {
+  flattenedTreeData: any[];
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
+export interface TableRowProps {
+  node: any;
+  level: number;
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
 export interface Column {
   name: string;
   accessor: string;
   width: string;
   isClickable?: boolean;
-  cell?: (row: any) => JSX.Element | string | null;
-  actions?: (row: any) => JSX.Element[];
+  cell?: (row: any) => JSX
+  actions?: (row: any) => JSX
   isTree?: boolean;
   defaultValue?: string;
-  defaultActions?: () => JSX.Element[];
+  defaultActions?: () => JSX
 }
 
 export interface TreeTableProps {
@@ -22,9 +61,8 @@ export interface TreeTableProps {
   columnsData: Column[];
   selected?: string[];
   select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (nodes: string[]) => void;
+  onChange?: (e: any, node: string[]) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
-  expandedNodes: string[];
   onExpand?: (_isExpanded: boolean, node: string) => void;
   onPagination?: (_direction: string) => void;
 }

package/src/components/TableWithAccordion/TableWithAccordion.scss

@@ -0,0 +1,54 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/colors';
+
+.ff-accordion-table-container {
+  overflow-y: auto;
+  .ff-accordion-table {
+    width: 100%;
+    .ff-table-header,
+    .ff-table-cell {
+      text-align: left;
+      padding: 9px;
+    }
+    .ff-table-header {
+      color: var(--text-color);
+      border-bottom: 1px solid var(--slider-table-color);
+    }
+    .ff-table-body {
+      .ff-table-row:hover {
+        background-color: var(--hover-color);
+      }
+    }
+    &--primary-bg {
+      background-color: var(--table-with-accordion-header-primary-bg);
+    }
+    &--secondary-bg {
+      background-color: var(--secondary-bg);
+    }
+    &--default-bg {
+      background-color: var(--default-bg);
+    }
+  }
+  .ff-accordion-fixed-header {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    background-color: var(--file-details-bg);
+  }
+  .column-table-accordion {
+    width: 100%;
+    .accordion-header {
+      display: flex;
+      align-items: center;
+      .header-title {
+        padding: 8px;
+      }
+      .accordion-arrow {
+        img {
+          height: 30px;
+          width: 35px;
+        }
+      }
+    }
+  }
+}

package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx

@@ -0,0 +1,94 @@
+import { StoryObj, Meta } from '@storybook/react';
+import TableWithAccordion from './TableWithAccordion';
+import { sampleData } from './data';
+
+const meta: Meta<typeof TableWithAccordion> = {
+  title: 'Components/TableWithAccordion',
+  component: TableWithAccordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof TableWithAccordion>;
+const defaultArgs = {
+  tableMeta: [],
+  tableData: [],
+};
+
+const emptyData: never[] = [];
+const columnsData = [
+  {
+    header: 'Description',
+    accessor: 'desc',
+    width: 100,
+  },
+  {
+    header: 'SUITE NAME',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE TYPE',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE ACCESS',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'Modified By',
+    accessor: 'modifiedBy',
+    width: 100,
+  },
+];
+
+export const TableWithRowAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+export const TableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const EmtptyTableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: emptyData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const AccordionTableWithFixedHeader: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    height: '200px',
+    withFixedHeader: true,
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export default meta;

package/src/components/TableWithAccordion/TableWithAccordion.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import Accordion from '../Accordion';
+import './TableWithAccordion.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import '../../../index.scss';
+import Typography from '../Typography';
+import { ColumnProps, TableProps } from './types';
+
+const TableWithAccordion = ({
+  tableMeta = [],
+  tableData = [],
+  accordionType = 'row',
+  noDataContent,
+  height = '100%',
+  withFixedHeader = false,
+  headerType,
+  TableAccordionStateIconWidth = 4,
+  TableAccordionStateIconHeight = 8,
+}: TableProps) => {
+  const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
+  const onAccordionClick = (index: number) => {
+    setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
+  };
+  const getAccordionTableCellContent = (
+    dataObj: any,
+    columnObj: ColumnProps
+  ) => {
+    let cellData = dataObj[columnObj.accessor];
+    if (columnObj.cell) {
+      return columnObj.cell({
+        value: cellData,
+        row: dataObj,
+        column: columnObj.accessor,
+      });
+    } else if (columnObj.accessor) {
+      return cellData;
+    } else if (cellData && typeof cellData !== 'object') {
+      return cellData;
+    } else {
+      return '--';
+    }
+  };
+  const getAccordionTableContent = (dataArray: any) => {
+    const accordionSubTable = dataArray.map((rowData: any, index: number) => {
+      return (
+        <table className="ff-accordion-table" cellSpacing={0}>
+          <tbody className="ff-table-body">
+            <tr className="ff-table-row" key={rowData.id || index}>
+              {tableMeta.map((column, i) => {
+                return (
+                  <td
+                    className="ff-table-cell"
+                    key={column.accessor + i}
+                    style={{ width: column.width }}
+                  >
+                    {accordionType === 'column' && i === 0 ? (
+                      ''
+                    ) : (
+                      <Typography>
+                        {getAccordionTableCellContent(rowData, column)}
+                      </Typography>
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      );
+    });
+    return accordionSubTable;
+  };
+  return (
+    <div
+      style={{ height: height }}
+      className={classNames('ff-accordion-table-container', {
+        'ff-accordion-fixed-header-table': withFixedHeader,
+      })}
+    >
+      <table
+        cellSpacing={0}
+        className={classNames('ff-accordion-table', {
+          'ff-accordion-fixed-header': withFixedHeader,
+        })}
+      >
+        <thead>
+          <tr className="ff-table-row">
+            {tableMeta.map((column) => (
+              <th
+                key={column.header}
+                style={{ width: column.width }}
+                className={classNames(
+                  'ff-table-header',
+                  headerType && `ff-accordion-table--${headerType}-bg`
+                )}
+              >
+                <div>
+                  <Typography fontWeight="medium" fontSize={12}>
+                    {column.header}
+                  </Typography>
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+      {accordionType === 'row' &&
+        tableData.map((row: any) => (
+          <Accordion
+            headerTitle={row.title}
+            color="var(--text-color)"
+            accordionContent={getAccordionTableContent(row.data)}
+            disable={row.disable}
+            disableInfoMessage={row.disableInfoMessage}
+            accordionStateIconName="arrows_down_icon"
+            AccordionStateIconWidth={TableAccordionStateIconWidth}
+            AccordionStateIconHeight={TableAccordionStateIconHeight}
+          />
+        ))}
+      {accordionType === 'column' &&
+        tableData.map((row: any, index: number) => (
+          <div className="column-table-accordion">
+            <div className="ff-display-flex">
+              <Tooltip title={row?.disableInfoMessage}>
+                <div
+                  className={`accordion-header ${row.disable && 'ff-disabled'}`}
+                >
+                  <div className="header-title">
+                    <span>
+                      <Typography fontWeight="regular">{row.title}</Typography>
+                    </span>
+                  </div>
+
+                  <div
+                    className="accordion-arrow"
+                    onClick={() => {
+                      !row.disable && onAccordionClick(index);
+                    }}
+                  >
+                    <Icon
+                      name={
+                        expandedRowIndex === index
+                          ? 'arrows_down_icon'
+                          : 'arrows_right_icon'
+                      }
+                      color="var(--table-with-accordion-icon-color)"
+                      width={TableAccordionStateIconWidth}
+                      height={TableAccordionStateIconHeight}
+                      hoverEffect={false}
+                    />
+                  </div>
+                </div>
+              </Tooltip>
+            </div>
+            {expandedRowIndex === index && (
+              <div>{getAccordionTableContent(row.data)}</div>
+            )}
+          </div>
+        ))}
+      {tableData.length <= 0 && (
+        <div
+          className="no-data-content"
+          style={{ height: `calc(${height} - 50px)` }}
+        >
+          {noDataContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TableWithAccordion;

package/src/components/TableWithAccordion/data.ts

@@ -0,0 +1,37 @@
+export const sampleData = [
+    {
+      title: 'Pre conditions',
+      data: [
+        {
+          desc: 'Open Browser',
+          modifiedBy: 'Ram',
+          suiteName: 'test',
+        },
+      ],
+    },
+    {
+      title: 'Steps',
+      data: [
+        {
+          desc: '1. SG1',
+          modifiedBy: 'Ram',
+          suiteName: 'suite1',
+        },
+        {
+          desc: '2. SG2',
+          modifiedBy: 'Laxman',
+          suiteName: 'suite 2',
+        },
+      ],
+    },
+    {
+      title: 'Post conditions',
+      data: [
+        {
+          desc: 'close browser',
+          modifiedBy: 'Krishna',
+          suiteName: 'test 2',
+        },
+      ],
+    },
+  ];

package/src/components/TableWithAccordion/index.ts

@@ -0,0 +1 @@
+export { default } from './TableWithAccordion';