Remove Inline And Code Generated CSS

Hi all,
I have posted an issue in the github repo but I think it would get more exposure here. I am trying to make frappe and ERPNext work with RTL languages e.g. Arabic. However, the inline css in some parts of the code makes it hard to do so. Moreover, some css are generated by code such as the SlickGrid which does not support RTL out of the box. I suggest using grid system that have better support such as datazenit/sensei-grid.


1 Like

@dalwadani sensi grid looks nice!

Can it handle very large amount of data? Say 100k lines?

Can you run a test and report.

Sensi grid’s biggest weakness, IMO, is slickgrids biggest weakness

“Touch support for mobile devices”

Maybe we need @netchampfaris to make a new grid now :smile:


When it comes to grid, I think the most lightning fast, features packed, and with extremely active community is React Data Grid, but as the name suggest its built with react and as far as I know Frappe team still don’t like react :slight_smile:

even in the demo you can deal with million rows without any lags

1 Like

I have run an 10k and 100k line example of the grid out of the box without any optimisations and it seems to be working fine but pushing the limits. You can see it here for 10k and here for 100k. Please note that the data loading in the example is blocking. I am guessing that, realistically, some kind of pagination and async loading is a must.


I am not sure when (or if) another grid system will be implemented. So, I think we should exclude the report results from the RTL support. I have created a pull request for that:



I tested your pull request. Screen goes blank after scroll.

@netchampfaris I am not sure what causes this issue at your end. I have tested it and it works fine. I rebased the pull request to be current with your version and I have tested again and no issues. Check this:

How to install bootstrap-rtl in ERPNext

Mohammed EL-Laithy
ERPNext Developer

It is already included and It will be lazy loaded when selecting Arabic or Hebrew frappe/public/css/bootstrap-rtl.css

How can i edit direction for pdf reports to RTL with Arabic language?
like this :


Depends. If you have access to the columns dictionary in a script report you can add an align key:

{"fieldname": 'ordered', "label": "Ordered", "fieldtype": "Data", "width": 90, "align": "right"},

As far as I know, this feature isn’t documented.
For reports where you can control the print format, you can add the pull-right CSS class from Bootstrap.

I cannot read or speak Arabic, so the specifics or conventions of what columns are not align correctly are lost on me.
What report is this?

Stock Ledger Report

and i mean with print preview in pdf too

Can u show pic