1

I am trying to add sorting capability on a grid. No third party library was used to construct this grid and add sorting capabilities. Currently, the way it works is only column is sorting at a time. If I add sorting feature on two columns, when I try to sort second column the sort icon from first column disappears. I am trying to look into the way sorting has been implemented but I am not able to pinpoint as to what is causing this behavior. The following is the source code for sorting functionality:

export const ORDER = {
  DESC: 'desc',
  ASC: 'asc'
};

export class SortInfo {
  constructor({ columnId, order }) {
    this.columnId = columnId;
    this.order = order;
  }

  getColumnId() {
    return this.columnId;
  }

  setOrder(order) {
    return new SortInfo({ ...this, order });
  }

  getOrder() {
    return this.order === ORDER.DESC ? ORDER.DESC : ORDER.ASC;
  }

  isValid(gridData) {
    return gridData.getHeaders().indexOf(this.columnId) >= 0;
  }

  isEmpty() {
    return this.columnId === undefined || this.columnId === null || this.columnId === '';
  }

  isEqual(anotherSortInfo) {
    return (
      anotherSortInfo &&
      this.getColumnId() === anotherSortInfo.getColumnId() &&
      this.getOrder() === anotherSortInfo.getOrder()
    );
  }

  serialize() {
    const { columnId, order } = this;
    return { columnId, order };
  }
}

function createSortInfo(columnId, order) {
  return new SortInfo({ columnId, order });
}

export function createAscendingSortInfo(columnId) {
  return createSortInfo(columnId, ORDER.ASC);
}

export function createDescendingSortInfo(columnId) {
  return createSortInfo(columnId, ORDER.DESC);
}

The way the sortInfo is being used is:

function createGridHeaders(gridData, onSort) {
  const sortInfo = gridData.getSortInfo();
  const sortId = sortInfo ? sortInfo.getColumnId() : undefined;
  gridData.getHeaders().map(id => ({headerName: new FieldRef(id, getGlobal).getLabel()}))
  return gridData
    .getHeaders()
    .map(id => ({
      headerName: new FieldRef(id, getGlobal).getLabel(),
      field: id,
      cellRendererParams: { format: getCellFormatter(new FieldRef(id, getGlobal)) },
      resizable: true,
      headerComponentParams: {
        sortOrder: id === sortId ? sortInfo.getOrder() : undefined
      },
      onSort
    }));
}
    const columns = gridData.getHeaders().length > 0
          ? createGridHeaders(gridData, this.onSort)
          : undefined;
return (
      <GridPage
        className="sampleTable"
        title={title}
        subtitle={subtitle}
        buttons={gridButtons}
        onLoad={this.fetchData}
        gridData={gridData}
        columns={columns}
      >
      </GridPage>
    );

As can be seen in the image below, when I tried to sort second column, the icon from the first column disappeared after both the columns displaying sort icon on initial load. What would cause it to allow only single column to be sortable at a time ?

enter image description here

4
  • 1
    This question is missing some important context. What does your headers JSX look like? Where does createGridHeaders actually get used? Mar 26, 2023 at 7:33
  • Thanks! I added that. Hope that helps to understand it better
    – user2128
    Mar 27, 2023 at 2:14
  • 3
    Is GridPage a component you created? If so, what does it’s JSX look like? Basically, you need to provide way more of your component code as this seems like a UI issue. Consider creating a minimal reproducible example on Stack Overflow or CodeSandbox. In the process you might discover your issue yourself, but it also gives answers the ability to inspect your code more closely. Mar 27, 2023 at 2:38
  • Is it being conditionally rendered based on headerComponentParms.sortOrder? That looks like it will be undefined for all columns other than the one you click so maybe that causes the icon to disappear. Which would make sense really, because that column is no longer sorted, and the icon is a visual indicator of the sort order of the column
    – jdebr
    Mar 28, 2023 at 20:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.