Formatting numbers with commas as thousand separators in st_aggrid's configure_columns method

Using Streamlit
#1

Hi all. Apologies if this is a stupid question/request, but I’m a bit of a noob. However, I’ve been searching for the last couple of weeks for a way to be able to format figures in tables I’m making with the st_aggrid library/component, to have comma delimiters for thousands, millions, etc.

While I’ve found a number of references to the valueFormatter, in each instance that appears to be formatting a specific data column (eg valueFormatter="parseFloat(data.numeric_column_a)... where I believe numeric_column_a is a specific column name.)

I’ve created a function (which I called table_maker ) to build tables and into that function I pass a list of currency columns, using your customCurrencyFormat method, which is great. However, within this I’d like to add in the comma delimiters for thousands.

Does anyone know if there’s a way I can deploy the valueFormatter within the configure_columns method to achieve this result? Here’s what I’m using in my table_maker function to format the currency columns:

gb.configure_columns( currency_cols_list, type=["numericColumn", "numberColumnFilter", "customCurrencyFormat"], precision=2, custom_currency_symbol="£", )

Again, apologies if this is not the right forum or I’m not being clear in the question. It’s just that I’ve been trying to get this working for a couple of weeks and can’t see any other way to move forward.

Thanks, in advance, for any help.

#2

Hi @theabbot

Is this what you are looking for?

Assuming I have a CSV file containing the following fields (and 1 line of data)
EMPNAME,AMT
P. KUMAR,441270

You want to display the number as … say… $441,270.0 in the AGGRID display, right?
Then you can use something like this to configure your number column (in my case - a column named ‘AMT’:

gb.configure_column("AMT", 
                    type=["numericColumn","numberColumnFilter","customNumericFormat"], 
                    valueGetter="data.AMT.toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits:1})")

Please change the parameters as required. Hope it works for you. (There are other ways to achieve this, but this seems the most simple.)

Cheers :slight_smile:

#3

Hi @Shawn_Pereira

Thanks very much for your reply.

I was hoping that there was a way to do this using the configure_columns method, as that’s what I’ve used to pass a list of columns in. I guess it may be possible to use a list comprehension through valueGetter or valueFormatter, but I was hoping there was a slick way I was missing within configure_columns that might avoid that.

Thanks again for your help. Cheers.