Hello,
Is there a way to sort the data alphabetically from A to Z and Z to A? I’d appreciate it if you could share an example.
Regards,
Hi @ykifahh
Yes, you can sort data alphabetically in Handsontable using the columnSorting plugin. It supports both ascending (A > Z) and descending (Z < A) sorting.
Here’s a basic example Rows sorting - JavaScript Data Grid | Handsontable
Clicking the column header will toggle between ascending and descending sort. Third click will remove the filtering entirely.
If you want to trigger it programmatically you can use our plugin’s API
hot.getPlugin('columnSorting').sort({ column: 0, sortOrder: 'asc' });
hot.getPlugin('columnSorting').sort({ column: 0, sortOrder: 'desc' });
Updated demo Handsontable example - JSFiddle - Code Playground
Thank you for your response. However, this doesn’t work correctly when using the Arabic language. Our system supports multiple languages—it works fine with English, but it doesn’t behave properly with Arabic. I’d be happy to provide an example if you’re interested in addressing this issue.
Thanks in advance
Thank you for the hint. I do not know arabic alphabet but used Claude AI to check it (please tell me if Claude’s feedback is incorrect).
Demo: Handsontable example - JSFiddle - Code Playground
Here we are sorting C column in the ascending order.
Claude feedback
order:
Row 1: تركيا (Turkey)
Row 2: لبنان (Lebanon)
Row 3: لبنان (Lebanon)
Row 4: لبنان (Lebanon)
Row 5: لبنان (Lebanon)
Row 6: مصر (Egypt)
Row 7: مصر (Egypt)
Row 8: مصر (Egypt)
Row 9: مصر (Egypt)
Row 10: مصر (Egypt)
No, column C is not sorted in ascending alphabetical order.
In proper Arabic alphabetical order, it should be:
لبنان (Lebanon) - starts with ل
مصر (Egypt) - starts with م
تركيا (Turkey) - starts with ت
But your data shows تركيا (Turkey) first, followed by لبنان (Lebanon), then مصر (Egypt). This is actually closer to descending order, but even then it's not perfectly sorted since we have one Turkey entry at the top followed by multiple Lebanon entries, then multiple Egypt entries.
So column C is not sorted in ascending alphabetical order.
Thank you for your response. While your example works, it doesn’t perform well with large datasets. Additionally, sorting doesn’t function correctly with English text. Please see the example below.
https://ifps.dtform.com/cp/module/petition/spreadsheet/index.php?form=1
I figured out there is only one record doesn’t match the sorting. I have no idea where is the issue? Any help would be appreciated
Could you please share your current setup?
When I set RTL mode for the table with 100+ rows the last row is sorted correctly handsontable - StackBlitz (tested on Chrome 137/macOS Ventura). I sorted the first column on the right.
Sure, this is the following code I use
const data = <?php echo json_encode($dataArrJson); ?>;
const hot = new Handsontable(container, {
data: data,
layoutDirection: ‘<?php echo htmlspecialchars($language['dir-' . $_SESSION['language']], ENT_QUOTES, 'UTF-8'); ?>’,
language: ‘<?php echo htmlspecialchars($language['spreadsheet-' . $_SESSION['language']], ENT_QUOTES, 'UTF-8'); ?>’,
colHeaders: colHeaders,
columns: headerName.map(item => {
switch (item.type) {
case 'text':
return { type: 'text' };
case 'number':
return { type: 'numeric'};
case 'date':
return {type: 'date', dateFormat: 'YYYY-MM-DD', filter: true};
default:
return { type: 'text' };
}
}),
rowHeaders: true,
// colHeaders: true, This will represent A, B C, D instead of the the header name
filters: true,
dropdownMenu: true,
dropdownMenu: ['alignment','---------', 'filter_by_condition', 'filter_by_value', 'filter_action_bar'],
readOnly: true, // ensures the cells cannot be edited.
contextMenu: ['copy'], // allows copying the selected text from the table using the right-click menu.
copyPaste: true, // Allow copying
// themeName: 'ht-theme-horizon-dark-auto',
themeName: 'ht-theme-main-dark-auto',
columnSorting: true,
manualColumnMove: true,
height: '96%',
stretchH: 'all',
autoWrapRow: true,
autoWrapCol: true,
manualColumnResize: false,
manualRowResize: false,
autoRowSize:false,
autoRowSize :false,
fixedColumnsStart: 2,
afterFilter: function(conditionsStack) {
// console.log(hot.countRows());
document.getElementById('totalFilter').textContent = "Total Filter: " + hot.countRows().toLocaleString();
},
licenseKey: 'non-commercial-and-evaluation' // For non-commercial use only
});
Hm… I tried those settings in the demo handsontable (duplicated) - StackBlitz and it seems to correctly sort all of the columns.
Maybe there are some other settings added updateSettings() in your application? Or maybe that row comes from a server call while/after the data is sorted?
Thank you! I found the issue—it was caused by a whitespace at the beginning of one of the names. After removing it, everything worked perfectly. 
Any updates on the pagination and preloader for Handsontable? Do you have an estimated timeline for completion?
Thank in advance
Hi @ykifahh
We have new commits coming in daily for the pagination pull request Row pagination functionality by budnix · Pull Request #11612 · handsontable/handsontable · GitHub. We are working on a auto page size mechanism at the moment. It takes a while as it has ti auto-calculate the size of the page based on the amount of data - which can be tricky.
It will surely take next 2 weeks as we are starting holiday season and there are many days off. However, we plan to publish the feature in v16.1.0. Where v16 should be ready for the 24th of June.
Thanks! Could you please provide a simple real-world example using 100 records for pagination, so I can integrate it into my project?
Is v16 published? I couldn’t find it, the latest version I found is: 15.3.0
regards,
Hi @ykifahh
Pagination will be available in Handsontable 16.1.0 and we haven’t released v.16.0 yet. We will let you know when it’s available.
Hi @ykifahh
Unfortunately, The pagination doesn’t supported RTL.However, When I set the layoutDirection: RTL ـــ the Pagination doesn’t work properly and the text just messed up please find the attached image, Is there anyway I can keep the pagination LTR while the dataset table still RTL
Any advice would be helpful
look at the page size the number everything is messed up 
I like the features and I appreciate you work but this small change could make the handsontable stand out
waiting for your reply
Hi @ykifahh
Thank you very much for this valuable feedback. I will do everything in my power to give it a priority.
Please verify if the following correct behavior is 100% right. As a person who uses only LTR I might get something wrong here.
Plus. I am also wondering if we should switch the list’s check mark to left.
Thank you very much for your reply and the effort you put into fixing this issue. I really appreciate Handsontable, and as I mentioned, I don’t mind keeping the pagination in LTR. However, my dataset and table must remain in RTL.
If the goal is to make it fully correct and perfectly functional for all RTL-supported languages—especially Arabic, which is used in more than 22 countries—then the proper 100% solution should be as I demonstrated in the attachment. You can follow that approach if you’d like to work on it.
Otherwise, if implementing this is too complex, please provide me with a way to force the pagination section to work in LTR while keeping the dataset and table in RTL.
Please let me know if you need any additional clarification. I look forward to your response.
Thank you very much for this valuable feedback, @ykifahh
I already created an internal issue for the team to read. Today, we will publish a new patch release, but I will do my best to ask the team to provide pagination RTL fix in the next release
Do you know when the next release will be? In that case, I can disable pagination. Also, I believe preloading doesn’t support RTL.
Best,
We needed to perform some tests, and 16.1.1 is planned for tomorrow. The next version may also be a patch. However, I do not know the date of the planned release.
Also, I believe preloading doesn’t support RTL.
That is interesting. I do not see any reported issues yet. If you have any suggestions, that will be very helpful.
Thank you for the quick update! With v16.1.1 everything is working perfectly as expected. As for pagination and preloading, I haven’t encountered any issues on my end.
I just have one question: at the moment, I’m using the following line to display the loading.
hot.getPlugin(‘loading’).show();
I want to hide the loading indicator once all data is loaded, but I don’t want to use setTimeout. Is there a function that tells me when loading is complete? And what should I do to hide the loading?
Thanks in advance