React-table: How to customize sort icon in header cell?

[prettyGIT]

I am wondering if it is possible to custom sort icon

Currently sort icon is defined as below
.ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {
-webkit-box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
}

I want to change it into arrow up/down icon corresponding to the sort order

[tannerlinsley]

Since this is more of an implementation question and not an issue or bug,
we suggest you use our slack channel to ask for more assistance. Thanks!

[kasarlavinaysrivastav]

was there a solution for this? I am looking for one to build.. Please let me know if you have accomplished changing sort icons to arrows. thanks

[andrewaxelrod]

A CSS Solution if you want to use a sorting up/down icon. This solution is for resizable columns enabled.

.ReactTable .rt-resizable-header {
    padding: 6px 24px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.ReactTable .rt-resizer:before {
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 3px;
    height: 18px;
    width: 18px;
    color: transparent;
    content: '.';
    background-size: 18px 18px;
    background-repeat: no-repeat; 
    opacity: 0.87;
}

.ReactTable  .rt-resizable-header-content:after {
    position: absolute;
    right: 8px;
    top: 3px;
    height: 18px;
    width: 18px;
    z-index: 120;
    color: transparent;
    content: '.';
}

.ReactTable .rt-th.-sort-asc .rt-resizer:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgMTVWNmw0IDQgMS0xLTYtNi02IDYgMSAxIDQtNHY5eiIgZmlsbD0iIzMzMyIvPjwvc3ZnPg==);
}

.ReactTable .rt-th.-sort-desc .rt-resizer:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAzdjkuMTNMNCA4IDMgOWw2IDYgNi02LTEtMS00IDQuMTNWM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=);
}

[Aaron-Lei]

@andrewaxelrod please tell me the steps on how to override the default react-table sorting css with the CSS solution you provided? Thanks

[andrewaxelrod-ist]

@Aaron-Lei You should be able to place it anywhere. It all depends on what you are using for the build process. For example, if you are using create react app, then you can drop this css into the App.css within the root directory.

[nmaties]

.MyReactTableClass {
  .-sort-desc {
    box-shadow: none !important;
    &:before {
      content: "▼";
      float: right;
    }
  }

  .-sort-asc {
    box-shadow: none !important;
    &:before {
      content: "▲";
      float: right;
    }
  }
}

[SimonVuong]

for a pure js way, you can do

import find from 'lodash/find';

const getTheadThProps = (table, row, col) => {
  const sortedCol = find(table.sorted, { id: col.id });
  const boxShadow =
    sortedCol ? `inset 0px ${sortedCol.desc ? -3 : 3}px 0px 0px ${colors.lightBlue}` : '';
  return {
    style: {
      ..._styles.thead,
      boxShadow,
    },
  };
};

<ReactTable
  data={data}
  columns={columns}
  getTheadThProps={getTheadThProps}
/>

[binglinglanyun]

@SimonVuong got _styles and colors not found, what's these two variables?

[fekajin]

you can give it like

<BaseTable
    components={components}
    fixed
/>

and

const components = {
      SortIndicator:  customSortComponent,
   // ...other components
    };

after that you can define your custom sort icon

CustomSort = (props) => {
    return (
      <div>
     {
     props.sortOrder === 'desc' ? ':)' : ':('
     }
      </div>
    );
  }