Table Sorting by Clicking Column Header

Ask the community
,
1

Hello, I need assistance in identifying how to make my table (which is connected to a Wix data collection and is being filtered via multiple dropdown menus) able to be sorted by clicking on the column header. In clicking on the column title in the header (example shown below), the column should ascend/descend in order. I have been unable to find any built-in feature (by Wix) to perform this type of sorting by the public and have zero experience with JavaScript.

Any assistance is greatly appreciated!

1283×329 41.5 KB

2

I think you currently can’t do it with Wix table.
However there’re 2 ways to do that:

  1. The more advanced way (for sites connected to your own domain): to create a table using custom element and add event listeners the the elements.

  2. To use a repeater and design it as a table.

Now, the first option is more complicated to develop but also more straightforward (an I personally would go for it as it let you full control over the table, so you can do sorting, cell merge, sticky header, tooltips and many other thing in addition to have the table responsive and the font size rescale based on the window width). But in order to do it you need to use html and css.

If you want to go for the easy-fast way, you should go for the repeater method and do something like:
Create a repeater with one item per line (this will be the table “row”).
Put text element for the 'cell’s
Put arrowDown and arrowUp icons below each text;
;

let rows = [];
$w.onReady(() => {
  $w('#dataset').onReady(() => {
    $w('#dataset').getItems(0,1000)
    .then(data => {
      rows = data.items;
      setTable('rank', 'numer', 'ascending');
    })
  $w('#arowDownRank').onClick(event => {
    setTable('rank', 'number', 'ascending');
  })//do it for all the sorting arrows
  })
})

function setTable(field, type, order){
  const header = [{_id: 'header', rank: 'Rank', player: 'Player',/*etc..*/}];
if(type === 'number'){
rows = rows.sort((a,b) => order === 'ascending' ? a[field] - b[field] : b[field] - a[field]);
} else if(type === 'string') {
rows = rows.sort((a,b) => {
const [valA, valB] = [a[field].toUpperCase(), b.[field].toUpperCase()]; // to ignore upper and lowercase
  if (valA  < valB) {return order === 'ascending' ? -1 : 1;}
  if (valA > valB) {return order === 'ascending' ? 1 : -1;}
  return 0;
})
}
$w('repeater').data = header.concat(rows);
$w('repeater').forEachItem(($i, iData, index) => {
if(index === 0){
//set here what to show for the header (sorting arrows etc..), the background color etc. Read the documentation for style
} else {
$i('#rank').text = iData.rank;
//etc.. for all cells
}
})
}