Datagrid; seach and reset btn

Dear all,   I have a datagrid, and above only two filters. unfortunately the 'search’ & 'reset’-buttons are all the way on the right! So there is a lot of space between the filters, and the buttons. How do I get these buttons  (logically) next to the filters? Thanks in advance Mark
3 answers

Hi Mark,

You can do that by adding some custom CSS to a custom SCSS file. If this only need to be applied to this single datagrid, I would suggest to add a custom class to that datagrid. For the example I assumed that you added a custom class. {
	.mx-grid-searchbar {
		justify-content: flex-start;
		.mx-grid-search-inputs {
			flex: none;
		.mx-grid-search-controls {
			margin-left: unset;

If you want to use this for every datagrid, you can just remove .customclass from the example.

Hope this helps.




Hi Mark,

To extend on what Jeffrey suggested; to add custom styling the best way is to; 

  • Install or open and setup Calypso
  • Go to your project directory \theme\styles\web\sass\app
  • Create a new folder called ‘Widgets’ 
  • Add a new file called ‘datagrid.scss’ 
  • Open _custom.scss from app folder, add @import"Widgets/datagrids" and save it
  • Go to datagrid.scss file and add code suggested by Jeffrey and save it so that Calypso compiles the code.


Hope this helps!


Thanks Jeffrey, that helps :-)