Headers alignment #93

marcosluizfp · 2022-09-17T16:33:41Z

marcosluizfp
Sep 17, 2022

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!