Column Names Get Cut Off When Sorting Is Enabled

[Thimows]

When the length of the column name is longer than the content of the cells in the column, the column name will be cut off when sorting is enabled. It looks like that the column does not stretch to fit the column name and the sorting button.

Image:

This happens on all browsers.

[afshinm]

Thanks @Thimows.

Grid.js calculates the columns width based on the width of the container (container is the element you pass to the render() function). I don't think this is a bug as you can explicitly set the column width and solve this issue (or resize your container to fill all columns) but I'm happy to test this a bit more and potentially add a different way of calculating the widths.

[Thimows]

Yes, there are definitely workarounds for this particular issue. It would help me very much though if this was automatically handled by the plugin (as I use the auto width feature). Calculating the width for each column myself does unfortunately not work with my integration. When sorting gets disabled, the column names don't get cut off anymore. If it would be possible to have the column expand just a couple of pixels to make room for the sorting icon so the names don't get cut off would be really useful for me (and maybe other users as well)! If you have the time to look into that I would be very grateful! Thanks again! (:

[npsyhos]

I don't think this is a bug as you can explicitly set the column width and solve this issue (or resize your container to fill all columns) but I'm happy to test this a bit more and potentially add a different way of calculating the widths.

Hi @afshinm, are you sure this isn't a bug? I'm running into a similar issue. I could set the width to correctly render them, but then I run into another issue with it rendering/resizing (I have resizable set to true) to fit the container when starting and going from a small to larger viewport (chrome). It does correctly resize going from a larger viewport to a smaller viewport though. Is there a setting I'm missing?

I think this person is running into the same issue, but they don't really describe it that well.
#650

Love everything about this project though!

Thanks,
Nick

[cossssmin]

Just ran into this - for anyone looking for a solution, I worked around it with some custom CSS:

th.gridjs-th-sort .gridjs-th-content {
  width: auto !important;
}

th.gridjs-th .gridjs-th-content {
  margin-top: 6px;
  margin-right: 10px;
}

button.gridjs-sort {
  float: none !important;
  margin-top: 4px;
}

As an aside, it might be useful if <th> would contain a single <div> child that you could style with flex (can't do that directly on the cell, of course) - would make things a bit easier :)

Thanks for a great library! 👍