Ability to set alignment in filter text

[chriddyp]

My columns are left aligned rather than right aligned:

                style_cell_conditional=[
                    {'if': {'column_id': 'rating'},
                     'width': '40px'},
                    {'if': {'column_id': 'date'},
                     'width': '80px',
                     'text-align': 'left'},
                    {'if': {'column_id': 'reviews'},
                     'width': 'calc(100% - 120px)',
                     'text-align': 'left'},
                    {'if': {'column_id': 'rating'}}
                ],

I'd expect that the filter's alignment would match the column's by default. So, my left aligned columns would have left aligned filter inputs.

Currently, the workaround is to override this in CSS:

.dash-filter input {
    text-align: left !important;
    padding-left: 5px !important;
}

(Note that style_filter={'text-align': 'left', 'padding-left': '5px'} doesn't get applied to the input element and so it doesn't work either.)

[HiIamJeff]

I am also experiencing this bug. Hope this will get noticed and fixed since this really complicates the straightforward style logic!

[codeAsgard]

@chriddyp please let us know when this issue is resolved. Thanks a lot.

[amarvin]

I got the same error today with dash-table==4.11.3. The workaround doesn't work for me, as I have a mix of left-aligned and right-aligned columns.

[alexcpn]

The WA here* works for now. Adding the snippet in python way to specify CSS
*#694 (comment)

        dash_table.DataTable(
            id='datatable-interactivity',
            columns=[
                {"name": i, "id": i} for i in thresholded_df.loc[:,['ds_org','y_org']] 
            ],
            style_filter={'textAlign': 'left'},
            style_cell={'textAlign': 'left'},
            data=thresholded_df.to_dict('records'),
             css=[{
                'selector': '.dash-spreadsheet td div',
                'rule': '''
                    line-height: 15px;
                    max-height: 30px; min-height: 30px; height: 30px;
                    display: block;
                    overflow-y: hidden;
                   ''' ,
                'selector': '.dash-filter input' ,
                'rule': '''
                    text-align: left !important;
                    padding-left: 5px !important;
                '''
            }],

            style_table={'overflowX': 'auto'}
    ),
    html.Div(id='datatable-interactivity-container'),

    ])

[mat3ck]

Got the same issue but used a different workaround:

.dash-filter input {
    text-align: inherit !important;
}

This way the text alignment default for inputs is overriden with the parent th property, which is provided by the cell style. So used in combination with style_cell_conditional it allows to text-align the filter just as the rest of the data, with right/left mix (solving @amarvin limitation above):

style_cell_conditional=[
    {"if": {"column_id": "left_col_1"}, "textAlign": "left"},
    {"if": {"column_id": "left_col_2"}, "textAlign": "left"},
    {"if": {"column_id": "right_col_2"}, "textAlign": "right"},
]

Only tested in Firefox 102.0 / dash-table-5.0.0