Sorting table column

[kmurari103]

Hi,
I want to sort table column which have <div> attached.
Column which have simply text or numbers are getting sorted but the one which contains <div> attached does not sort, is there a way to sort that column , any code snippet would be helpful.
Here is how i'm storing table data to pass as props in <Table> component

// TableData
function getTableData() {
    (async () => {
      values = await SmartDeviceDecorator.getSmartDeviceData();
      values.forEach(item => {
        let image = <img src={item.getIcon()} width={SmartDeviceMarker.iconSize + "px"} alt={item.alt}></img>;
        let name = item.smartDeviceId;
        let lastvalue = item.lastValue;
        let { backgroundColor, color } = item.getCellColors();
        let status=
          <div className="iui-cell" key={item.laststatus }style={{ backgroundColor, color, padding: "10px", justifyContent: "center"}}>
            {item.laststatus}
          </div>
        tableData.push({ image, name, lastvalue, status });
      })
      // console.log(JSON.stringify(tableData));
      setSmartTableList(tableData);
    })();
  }

//Column 
const tableColumns = React.useMemo(
    () =>
      [
        {
          Header: 'Table',
          columns: [
            {
              Header: '',
              accessor: 'image',
              id: 'image',
            },
            {
              Header: 'Name',
              accessor: 'name',
              id: 'name',
              fieldType: 'text',
            },
            {
              Header: 'Status',
              accessor: 'status',
              id: 'status',
              fieldType: 'text',   
            },
            {
              Header: 'Value',
              accessor: 'lastvalue',
              fieldType: 'text',
              id: 'lastvalue',
            }
          ]
        }
      ], [],
  );

//Table component
return (
    <Table
      columns={tableColumns}
      data={smartTableList}
       isSortable={true}
    />
  )

[bentleyvk]

Hey,
I see you are passing React elements as a data fields. What you should do instead is to use Cell property in column. Also, for sort to work you need to use accessor property in column to pass required field to the Table. Here is the fixed code:

// TableData
function getTableData() {
    (async () => {
      setSmartTableList(await SmartDeviceDecorator.getSmartDeviceData());
    })();
  }
  
//Column 
const tableColumns = React.useMemo(
    ():Columns[] =>
      [
        {
          Header: 'Table',
          columns: [
            {
              Header: '',
              accessor: 'image',
              id: 'image',
              Cell: (props) => {
                return <img src={props.row.original.getIcon()} width={SmartDeviceMarker.iconSize + "px"} alt={props.row.original.alt}></img>
              }
            },
            {
              Header: 'Name',
              accessor: 'smartDeviceId',
              id: 'name',
              fieldType: 'text',
            },
            {
              Header: 'Status',
              accessor: 'laststatus',
              id: 'status',
              fieldType: 'text',
              Cell: (props) => {
                const { backgroundColor, color } = props.row.original.getCellColors();
                return <div className="iui-cell" key={props.row.original.laststatus } style={{ backgroundColor, color, padding: "10px", justifyContent: "center"}}>
                  {props.row.original.laststatus}
                </div>
              }
            },
            {
              Header: 'Value',
              accessor: 'lastvalue',
              fieldType: 'text',
              id: 'lastvalue',
            }
          ]
        }
      ], [],
  );

[kmurari103]

That works well, Thanks for the guidance.