Headers alignment

[marcosluizfp]

Is there a simple way to align headers? (e.g to center or to the right)

A simple way could be using the "Header" prop on the columns array:

        Header: ({ column }) => (
          <Box sx={{ textAlign: "right", width: "100%" }}>
            {column.columnDef.header}
          </Box>
        ),

However this doesn't work!

I noticed this is because the header is being a child of a non-accessible parent element which unfortunately has no width.

Changing the muiTableHeadCellProps prop still doesn't work because it is one level up the aforementioned non-accessible element.

muiTableHeadCellProps
   non-accessible parent element
      header element

A solution for the above code to work could be:
a) to set width of the aforementioned non-accessible element to 100%;
b) or to expose the element - e.g. as muiTableHeadCellHeaderProps;

As a workaround I used a ref hook and side effect hook to find the non-accessible parent and change its width.

  // Set the headers' parent element width to 100%
  // in order to properly align headers when desired
  // IMPORTANT: The headerRef must be set to only one header
  const headerRef = useRef<HTMLElement>();
  useEffect(() => {
    if (headerRef.current) {
      const className = headerRef.current.parentElement?.className;
      const parents = document.getElementsByClassName(className || "");
      for (let colIndex = 0; colIndex < parents.length; colIndex++) {
        const parent = parents[colIndex] as HTMLElement;
        parent.style["width"] = "100%";

        // Optionally you can justify the specific columns
        if (colIndex === 1 || colIndex === 2) {
          parent.style["justifyContent"] = "flex-end";
        }
      }
    }
  }, []);

The Header prop has to be updated with the ref too:

        // The header to be aligned must have textAlign and width styles
        // IMPORTANT: The headerRef must be set to only one header
        Header: ({ column }) => (
          <Box ref={headerRef} sx={{ textAlign: "right", width: "100%" }}>
            {column.columnDef.header}
          </Box>
        ),

Please, let me know if I missed something that could be used to make this header alignment!

[KevinVandy]

Yes, actually and it is way simpler than all that by using the align prop in muiTableHeadCellProps

I hadn't added it to the docs yet, but you can see some storybook stories showing the default behavior

https://www.material-react-table.dev/?path=/story/styling-table-alignment-examples--center-all-cells

[KevinVandy]

I am considering adding better defaults or options for aligning the columns actions button though

[marcosluizfp]

Great @KevinVandy, it worked perfectly, thanks!

It would be very nice to have more defaults or options too!