Cara menggunakan javascript sorting multiple columns

SongArtistYearThe Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961Witchy WomanThe Eagles1972Shining StarEarth, Wind, and Fire1975

Song Artist Year
The Sliding Mr. Bones (Next Stop, Pottersville) Malcolm Lockyer 1961
Witchy Woman The Eagles 1972
Shining Star Earth, Wind, and Fire 1975

Fixed

Use table-fixed to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table.

You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst the columns without explicit width.

SongArtistYearThe Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961Witchy WomanThe Eagles1972Shining StarEarth, Wind, and Fire1975

Song Artist Year
The Sliding Mr. Bones (Next Stop, Pottersville) Malcolm Lockyer 1961
Witchy Woman The Eagles 1972
Shining Star Earth, Wind, and Fire 1975

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:table-fixed to only apply the table-fixed utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:table-fixed to apply the table-fixed utility at only medium screen sizes and above.

However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".

Because of this, the sort() method will produce incorrect result when sorting numbers.

You can fix this by providing a compare function:

Example

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Try it Yourself »

Use the same trick to sort an array descending:

Example

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

Try it Yourself »



The Compare Function

The purpose of the compare function is to define an alternative sort order.

The compare function should return a negative, zero, or positive value, depending on the arguments:

function(a, b){return a - b}

When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

If the result is negative, a is sorted before b.

If the result is positive, b is sorted before a.

If the result is 0, no changes are done with the sort order of the two values.

Example:

The compare function compares all the values in the array, two values at a time sort()0.

When comparing 40 and 100, the sort() method calls the compare function(40, 100).

The function calculates 40 - 100 sort()2, and since the result is negative (-60),  the sort function will sort 40 as a value lower than 100.

You can use this code snippet to experiment with numerically and alphabetically sorting:

Sort Alphabetically
Sort Numerically

Try it Yourself »


Sorting an Array in Random Order

Example

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(){return 0.5 - Math.random()});

Try it Yourself »


The Fisher Yates Method

The above example, array.sort(), is not accurate. It will favor some numbers over the others.

The most popular correct method, is called the Fisher Yates shuffle, and was introduced in data science as early as 1938!

In JavaScript the method can be translated to this:

Example

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i+1));
  let k = points[i];
  points[i] = points[j];
  points[j] = k;
}

Try it Yourself »


Find the Highest (or Lowest) Array Value

There are no built-in functions for finding the max or min value in an array.

However, after you have sorted an array, you can use the index to obtain the highest and lowest values.

Sorting ascending:

Example

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

Try it Yourself »

Sorting descending:

Example

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

Try it Yourself »

Sorting a whole array is a very inefficient method if you only want to find the highest (or lowest) value.


Using Math.max() on an Array

You can use sort()3 to find the highest number in an array:

sort()4 is equivalent to sort()5.


Using Math.min() on an Array

You can use sort()6 to find the lowest number in an array:

sort()7 is equivalent to sort()8.


My Min / Max JavaScript Methods

The fastest solution is to use a "home made" method.

This function loops through an array comparing each value with the highest value found:

Example (Find Max)

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}

Try it Yourself »

This function loops through an array comparing each value with the lowest value found:

Example (Find Min)

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}

Try it Yourself »


Sorting Object Arrays

JavaScript arrays often contain objects:

Example

const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

Even if objects have properties of different data types, the sort() method can be used to sort the array.