1

I have a PrimeReact DataTable with multiple columns.

Each column has a text header, optionally with sort and filter options. Alignment of the columns can differ, and I would like the alignment of the headers to match that of the columns. But if the sort and/or filter options are active for that column, I want the sort and filter icons to ALWAYS be right aligned, regardless of the text alignment of that column header.

I can use the alignHeader property of the Column to decide if I want the header text to be aligned left, right of center. But that will make the sort and filter icons left or center aligned as well.

For a right aligned header it's obvious, as using alignHeader will ensure that both the header text and the icons are right aligned

And if all column headers should be left aligned, I know I could use

display: flex;
justify-content: space-between;

to solve this, as it will move the header text to the left and the icons to the right (regardless of the alignHeader values).

But that doesn't work when I want to have different alignment in the different column headers.

And I can't figure out how to properly solve it for center aligned header text at all.

So what would be the best/easiest way to handle this?

With the exception of the above mentioned left alignment solution, every solution I tried resulted in the header text and the header icons being grouped together and both being aligned the same, which is not what I want.

[Edit] a simple example of such a DataTable would be:

<DataTable
    ref={dt}
    value={products}
    sortMode="multiple"
    editMode="cell"
    removableSort
    rows={20}
    reorderableColumns
    resizableColumns
    filterDisplay="row"
>
  <Column
    header="#"
    alignHeader="center"
    headerStyle={{ width: '200px' }}
    bodyStyle={{ textAlign: 'center' }}
    body={(data, options) => options.rowIndex + 1}
  />
  <Column
    header={"Description"}
    alignHeader="left"
    field={"Description"}
    filterMatchMode="contains"
    filter
    sortable
    filterHeader
    bodyStyle={{ textAlign: "left" }}
  />
  <Column
    header={"Amount"}
    headerStyle={{ width: '150px' }}
    alignHeader="right"
    bodyStyle={{ textAlign: 'right' }}
    field="Amount"
    sortable
  />
  <Column
    header={"Valid"}
    headerStyle={{ width: '50px' }}
    alignHeader="center"
    bodyStyle={{ textAlign: 'center' }}
    field="IsValid"
    sortable
  />
</DataTable>;
3
  • Simpe code example added to my original comment. And yes, the PrimeReact tag is relevant, as I'm using the PrimeReact DataTable component here. Commented Jul 25 at 14:05
  • That would be great - if that's how this can be solved, then I hope somebody is able to provide an example of how to do that in this DataTable. Personally I don't see how to do it, as the sort and filter icons are lower level PrimeReact components that I don't appear to have direct access to. Commented Jul 25 at 14:24
  • You are right - it needs far more PrimeReact knowledge than I have. Commented Jul 25 at 14:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.