How to right align first 3 columns of table and the rest stay centered?

Dash Python
1

I have a table in my dash app defined as the snippet below. After researching how to right align first 3 columns while the others remain align centered, I am stuck. I see that in pure html/css the pseudo classes nth child can be used. But I read somewhere this is not supported in dash. I also tried doing it and surely I couldn’t figure it out.

Does anyone know how I can have columns 1,2,3 be right aligned, and the others centered? I see also that there are “row-index”, is there such a thing as “column-index”?

Thanks!

html.Div([
    dcc.Loading(dash_table.DataTable(
    id='my_table',
    sort_action='native',
    columns= None,
    data= None,
    page_current= 0,
    page_size= 40,
    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(220, 220, 220)',
        }
    ],    
    style_header={
        'backgroundColor': '#f6f6f6',
        'color': '#303030',
        'fontWeight': 'bold',
  #      'text-align': 'center',
        'vertical-align': 'middle',
        'text-decoration':'underline',
        'font-family':'Open-Sans',
        'font-size': '14px'
    },
    style_data={
        'backgroundColor': '#f6f6f6',
        'color': '#303030',
   #     'text-align': 'center',
        'vertical-align': 'middle',
        'font-family':'Open-Sans',
        'font-size': '12px'
    },
    style_table={'overflowX': 'scroll'},
    ))]
2

Hello @northern_llama,

I believe I have a code snippet from a current project that may help you. Please note style_cell_conditional, specifically, which allows you to style columns based on headers. I have a loop that iterates through all of my columns, but you can hard-code the columns you want to format. Also take a look at the reference documentation. Let me know if this helps.

html.Div(
    [
        dash_table.DataTable(
            id='pending-requests-table',
            columns=[
                {'id': 'id', 'name': 'ID', 'type':'numeric'},
                {'id': 'date_submitted', 'name': 'Date Submitted', 'type':'text'},
                {'id': 'request_number', 'name': 'Request Number', 'type':'numeric'},
                {'id': 'condition_number', 'name': 'Condition', 'type':'numeric'},
                {'id': 'f6_lot', 'name': 'F6 Lot', 'type':'text'},
                {'id': 'f6_conc', 'name': 'F6 Concentration', 'type':'numeric'},
                {'id': 'membrane_lot', 'name': 'Membrane Lot', 'type':'text'},
                {'id': 'gold_lot', 'name': 'Gold Lot', 'type':'text'},
                {'id': 'result', 'name': 'Result', 'type':'text', 'presentation':'dropdown'},
                {'id': 'comments', 'name': 'Comments', 'type':'text'}],
            page_current=0,
            page_size=10,
            page_action='native',
            filter_action='native',
            sort_action='native',
            editable=True,
            style_cell_conditional=[
                {
                    'if': {'column_id': c},
                    'textAlign': 'center'
                } for c in df_cols],
            dropdown={
                'result': {
                    'options': [
                        {'label': i, 'value': i}
                        for i in ['pass', 'fail']
            ]},},
            style_header={
                'fontSize':14, 
                'font-family':'sans-serif',
                'background-color':'#08688f',
                'color':'white'},
            style_cell={
                'fontSize':12, 
                'font-family':'sans-serif'},
            # Bootstrap bug prevents dropdowns from rendering properly. Following CSS required.
            css=[{"selector": ".Select-menu-outer", "rule": "display: block !important"}],
        )
    ],
    style={'padding':'10px'}
),