# Removing Autosort from Datagrid Headers

**URL:** https://community.stadium.software/community/t/removing-autosort-from-datagrid-headers/270
**Category:** How To
**Created:** [March 27, 2025, 1:49pm UTC](https://community.stadium.software/community/t/removing-autosort-from-datagrid-headers/270 "2025-03-27T13:49:14Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![jason](https://community.stadium.software/community/letter_avatar_proxy/v4/letter/j/dc4da7/32.png) [@jason](https://community.stadium.software/community/u/jason)
#### Post date: [March 27, 2025, 1:49pm UTC](https://community.stadium.software/community/t/removing-autosort-from-datagrid-headers/270/1 "2025-03-27T13:49:14Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![franz](https://community.stadium.software/community/letter_avatar_proxy/v4/letter/f/c37758/32.png) [@franz](https://community.stadium.software/community/u/franz)
#### Post date: [September 1, 2025, 9:24am UTC](https://community.stadium.software/community/t/removing-autosort-from-datagrid-headers/270/2 "2025-09-01T09:24:30Z")

</div>

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

```css
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

```css
@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

```css
@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:

```css
@scope (.remove-clickability) {
	th:nth-child(4) a,
	th:nth-child(5) a {
		pointer-events: none;
		color: var(--BODY-FONT-COLOR);
	}
}

```