Merge pull request #1997 from dxc-technology/Mil4n0r/resultset-typing

Fixed resultSet typing for rows

Author: Jialecl

lib/src/resultset-table/ResultsetTable.tsx

@@ -12,7 +12,7 @@ import CoreTokens from "../common/coreTokens";
 const normalizeSortValue = (sortValue: string | React.ReactNode) =>
   typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
 
-const sortArray = (index: number, order: "ascending" | "descending", resultset: { id: string; cells: Row[] }[]) =>
+const sortArray = (index: number, order: "ascending" | "descending", resultset: { id: string; cells: Row }[]) =>
   resultset.slice().sort((element1, element2) => {
     const sortValueA = normalizeSortValue(element1.cells[index].sortValue || element1[index].displayValue);
     const sortValueB = normalizeSortValue(element2.cells[index].sortValue || element2[index].displayValue);
@@ -35,11 +35,11 @@ const getMinItemsPerPageIndex = (currentPageInternal: number, itemsPerPage: numb
 const getMaxItemsPerPageIndex = (
   minItemsPerPageIndex: number,
   itemsPerPage: number,
-  resultset: Row[][],
+  resultset: Row[],
   page: number,
 ) => (minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1);
 
-const assignIdsToRows = (resultset: Row[][]) => {
+const assignIdsToRows = (resultset: Row[]) => {
   if (resultset.length > 0) {
     return resultset.map((row, index) => ({
       cells: row,

lib/src/resultset-table/types.ts

@@ -17,7 +17,7 @@ export type Column = {
   isSortable?: boolean;
 };
 
-export type Row = {
+type Cell = {
   /**
    * Value to be displayed in the cell.
    */
@@ -29,6 +29,8 @@ export type Row = {
   sortValue?: string;
 };
 
+export type Row = Cell[];
+
 type CommonProps = {
   /**
    * An array of objects representing the columns of the table.
@@ -38,7 +40,7 @@ type CommonProps = {
    * An array of objects representing the rows of the table, you will have
    * as many objects as columns in the table.
    */
-  rows: Row[][];
+  rows: Row[];
   /**
    * Size of the margin to be applied to the component. You can pass an object with 'top',
    * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.

website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx

@@ -31,6 +31,15 @@ const actionsType = `{
   options: Option[];
 }[]`;
 
+const cellTypeString = `{ 
+  displayValue: React.ReactNode; 
+  sortValue?: string; 
+}[]`;
+const columnTypeString = `{ 
+  displayValue: React.ReactNode; 
+  isSortable?: boolean; 
+}`;
+
 const sections = [
   {
     title: "Props",
@@ -53,9 +62,12 @@ const sections = [
               </DxcFlex>
             </td>
             <td>
-              <TableCode>
-                {"{ displayValue: React.ReactNode; isSortable?: boolean; }[]"}
-              </TableCode>
+              <TableCode>Column[]</TableCode>
+              <p>
+                being <Code>Column</Code> an object with the following
+                properties:
+              </p>
+              <ExtendedTableCode>{columnTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the columns of the table. Each
@@ -80,14 +92,17 @@ const sections = [
               </DxcFlex>
             </td>
             <td>
-              <TableCode>
-                {"{ displayValue: React.ReactNode; sortValue?: string; }[]"}
-              </TableCode>
+              <TableCode>Row[]</TableCode>
+              <p>
+                being <Code>Row</Code> a <Code>Cell[]</Code> and being{" "}
+                <Code>Cell</Code> an object with the following properties:
+              </p>
+              <ExtendedTableCode>{cellTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the rows of the table, you will
-              have as many objects as columns in the table. Each object has the
-              following properties:
+              have as many objects as columns in the table. Each row is a set of
+              cells that have the following properties:
               <ul>
                 <li>
                   <b>displayValue</b>: Value to be displayed in the cell.