Removing Autosort from Datagrid Headers

How To
1

Hi everyone.
I hope you are well. We recently received a request to remove the AutoSort/Clickable headers on the datagrids in Stadium 6. Has anyone worked on something similar or found a solution or workaround for this?

2

Hi Jason,
you can remove the clickability of any element in CSS. The CSS that allows you to acheive this is:

pointer-events: none;

Follow the steps below to apply this CSS to the DataGrid headers:

  1. Add a unique class to the DataGrid classes property (e.g. remove-clickability)
  2. Paste the css below to your application stylesheet
@scope (.remove-clickability) {
	th a {
		pointer-events: none;
}
  1. You can further use the CSS below to remove any styling from the headers that indicate their clickability, by adding
@scope (.remove-clickability) {
	th a {
		pointer-events: none;
		color: var(--BODY-FONT-COLOR);
	}
	thead tr {
		/*removes the underline from header links*/
		color: transparent;
	}
}
  1. To remove the clickability from selected headers only, you need to define which specific headers should not be clickable. The example below is applied to columns 4 and 5 only:
@scope (.remove-clickability) {
	th:nth-child(4) a,
	th:nth-child(5) a {
		pointer-events: none;
		color: var(--BODY-FONT-COLOR);
	}
}