Render a Table Cell with React JqxLinearGauge

[TT MMParticipant]

Using React, I’m trying to render a JqxDataTable cell with a JqxLinearGauge component without much success. Is what I’m trying to do even possible? I’ve stripped down the original version of the code and included what I think is the relevant snippet, depicting my attempt to render a JqxGauge in a table cell below: (Two different cases of cellsrenderer are shown.) (If you notice that the code shouldn’t run, trust me it does — I may have pared it down too much, but the real code runs. It’s the cellsrenderer code that doesn’t deliver for me.)

Case 1 (using temperate literal with JqxLinearGauge):

import * as React from "react";
// import * as ReactDOM from "react-dom";

import JqxDataTable, {
   IDataTableProps,
   jqx,
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable";
import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-react-tsx/jqxlineargauge";

import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import "jqwidgets-scripts/jqwidgets/styles/jqx.office.css";

import "../../styles/index.css";
// import cellRendererRange52 from "../renderers/cellRendererRange52";

interface MyState extends IDataTableProps {
   stockWatch?: any;
   isLoggedInToFirebase?: boolean;
   ownSource?: any[];
   ownEditorRenderer?: any;
}
class BodComp1 extends React.PureComponent<
   {
      auth2: any;
      loggedInWithGoogle: boolean;
      googleToken: any;
      emailAddress: any;
   },
   MyState
> {
   stocksRef: any;
   numUpdates: number;
   numRows: number;
   columns: any[];
   dataAdapter: null;
   auth2!: gapi.auth2.GoogleAuth;
   stock: any | undefined;
   emailAddress: string | undefined;

   private myDataTable = React.createRef<JqxDataTable>();
   private myLinearGauge = React.createRef<JqxLinearGauge>();

   constructor(props: {
      auth2: any;
      loggedInWithGoogle: boolean;
      googleToken: any;
      emailAddress: any;
   }) {
      super(props);
      this.stocksRef = "";
      this.numUpdates = 0;
      this.numRows = 0;
      this.columns = [];
      this.dataAdapter = null;

      this.state = {
         stockWatch: [],
         isLoggedInToFirebase: false,
         editSettings: {
            cancelOnEsc: true,
            editOnDoubleClick: true,
            editOnF2: true,
            editSingleCell: true,
            saveOnBlur: true,
            saveOnEnter: true,
            saveOnPageChange: true,
            saveOnSelectionChange: true,
         },
      };
      this.getAppBodyContent = this.getAppBodyContent.bind(this);
   }

   componentDidMount() {}

   onCollectionUpdate = (querySnapshot: any) => {
      // console.log(<code>In onCollectionUpdate() <${util.inspect(querySnapshot)}></code>);
      this.numUpdates++;
      let stockWatch: any[] = [];
      this.numRows = 0;
      querySnapshot.forEach(
         (doc: {
            data: () => {
               companyName: any;
               latestPrice: any;
               symbol: any;
               range52: any;
            };
            id: any;
         }) => {
            const { companyName, latestPrice, symbol, range52 } = doc.data();
            stockWatch.push({
               key: doc.id,
               doc, // DocumentSnapshot
               companyName,
               latestPrice,
               symbol,
               range52,
            });
         }
      );
      this.setState({
         stockWatch,
      });
      this.numRows++;
   };

   getAppBodyContent() {
      const source = {
         datafields: [
            { name: "companyName", type: "string" },
            { name: "symbol", type: "string" },
            { name: "latestPrice", type: "float" },
            { name: "range52", type: "string" },
         ],
         id: "key",
         dataType: "json",
         localData: () => {
            let data: any[] = [];
            let i = 0;

            this.state.stockWatch.forEach((s: any) => {
               data[i++] = {
                  key: s.key,
                  companyName: s.companyName,
                  symbol: s.symbol,
                  latestPrice: s.latestPrice,
                  range52: s.range52,
               };
               this.numRows++;
            });
            return data;
         },
      };
      this.dataAdapter = new jqx.dataAdapter(source);
      // --
      const columnWidths = [
         ["companyNameWidth", 200],
         ["tickerWidth", 64],
         ["currPriceWidth", 90],
         ["range52Width", 115],
      ];

      this.columns = [
         {
            text: "Company Name",
            datafield: "companyName",
            width: columnWidths[2][1],
            align: "center",
            editable: false,
         },
         {
            text: "Symbol",
            datafield: "symbol",
            width: columnWidths[3][1],
            editable: false,
         },
         {
            text: "Curr. Price",
            datafield: "latestPrice",
            align: "center",
            width: columnWidths[4][1],
            cellsalign: "right",
            cellsformat: "c2",
            editable: false,
         },
         {
            text: "52W Range",
            datafield: "range52",
            width: columnWidths[14][1],
            editable: false,
            align: "center",
            cellsalign: "center",
            cellsrenderer: (
               row: any,
               column: any,
               value: any,
               rowData: any
            ): any => {
                  return " <-- this is really a back-tick, but it clobbers the code formatting of this post

                        ${(
                           <JqxLinearGauge>
                              ref={this.myLinearGauge}
                              width={"99px"}
                              height={"25px"}
                              orientation={"horizontal"}
                              min={0}
                              value={66}
                              max={100}
                              ticksPosition={"both"}
                           </JqxLinearGauge>
                        )}
                    "; <-- this is really a back-tick, but it clobbers the code formatting of this post
            }, //cellsrenderer closing bracket
         },
      ];
      return (
         <JqxDataTable
            ref={this.myDataTable}
            width={1100}
            theme={"office"}
            source={this.dataAdapter}
            columns={this.columns}
            filterable={true}
            pageable={true}
            pagerMode={"advanced"}
            altRows={true}
            autoRowHeight={true}
            height={this.numRows > 10 ? 650 : this.numRows * 59 + 190}
            sortable={true}
            columnsReorder={true}
            columnsResize={true}
            editable={true}
            key={this.numUpdates} // this forces a re-render of the table!
            editSettings={this.state.editSettings}
            pageSizeOptions={[5, 10, 25, 30, 50]}
            pageSize={30}
         />
      );
   }

   public render() {
      return <div>{this.getAppBodyContent()}</div>;
   }
}

export default BodComp1;

Running the snippet above renders the following in the cell: [object Object]
Obviously, not what I want.

—————————-
Case 2 (cellsrenderer does not return anything, but it tries to render the JqxLinearGauge in the appropriate cell of the table; i.e., the parent element of the linear gauge):

               cellsrenderer: (
                  row: any,
                  column: any,
                  value: any,
                  rowData: any
               ): any => {
                  const theRange52Cell = document.querySelector(
body > div:nth-of-type(1) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(4) > div:nth-of-type(2) > div > table:nth-of-type(2) > tbody > tr:nth-of-type(${row +
                        1}) > td:nth-of-type(11)
                  );
                  ReactDOM.render(
                     <JqxLinearGauge>
                        ref={this.myLinearGauge}
                        width={"99px"}
                        height={"25px"}
                        orientation={"horizontal"}
                        min={0}
                        value={66}
                        max={100}
                        ticksPosition={"both"}
                     </JqxLinearGauge>,
                     theRange52Cell
                  );
               }, //cellsrenderer closing bracket

Running the snippet above did not render the table because of the following error:
Error: Minified React error #200; which translates into: Target container is not a DOM element.
I believe it’s telling me that the cell doesn’t yet exist yet at the time I’m trying to render the JqxLinearGauge.
(By the way, I pulled the css querySelector Xpath from the chrome inspector when the table rendered properly using the value, so I know that is correct.)

Any suggestions? Is this even possible?

Thanks,
Tony

[HristoParticipant]

Hello Tony,

The cellsRenderer callback is used to transform the data represented in the cells typically.
Another option that you could use is rendered callback.
Please, take a look at the approach used in the demo below:
https://www.jqwidgets.com/react/react-datatable/react-datatable-rowtemplate.htm?material

Also, if you do not have a specific reason to use the jqxDataTable then I would like to suggest another approach.
But for this reason, you need to use the jqxGrid and its createwidget and initwidget callbacks.
I would like to suggest you look at this demo and to visualize the wanted widget you could use the “render” method of the React to visualize it.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts