Right align a numeric column in a left-aligned table

Dash Python
1

I know this might sound weird to you but I am trying right align a numeric column in a left-aligned table. See the screenshot below. The data comes from pandas df so I am using _ as a placeholder for now. Basically, I want to replace _ with &nbsp. I tried putting empty space in pandas df but it got ignored. Is it possible to create another div in that specific column and right-align the numbers? Any suggestion would be greatly appreciated!

Screenshot 2023-06-16 at 10.35.55 AM

2

Hello @hellozeyu,

Welcome to the community!

Could you please post a little more about how you are trying to do this? How are you creating the table?

Have you looked a AG Grid or DashTable? Both of these would allow you to set custom alignments.

3

Yes! I am using DashTable for now and here is the code snippet. What I am doing is converting that numeric column to string and calculating the maximum length. Then I pad some placeholders to the beginning if needed. I checked the DashTable documentation but it seems like you can only style the whole table, not a specific column.

Frontend:

dash_table.DataTable(
    id="descriptive_table",
    is_focused=True,
    style_cell={'textAlign': 'left', 'border': '1px solid gray', 'fontSize': 15},
    style_header={
        'backgroundColor': '#cfd8dc',
        'color': 'black',
        'fontWeight': 'bold',
    },
)

The pandas df that I am returning to the Dashtable

df['Count'] = df['Count'].astype(str)
max_len = max(df['Count'].str.len())
df['Count'] = f['Count'].map(lambda x: '_'*(max_len-len(x)) + x)
4

Check out this example:

You have to use conditional formatting for it to work.

With AG Grid, you can customize each columns alignment directly from the columnDefs