SongArtistYearThe Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961Witchy WomanThe Eagles1972Shining StarEarth, Wind, and Fire1975
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
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});
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});
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
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
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
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.