How to configure the DataGrid to maximise screen real estate
By adminยท
Many modern apps rely heavily on white-space to make the user interface easy to read and follow. However, there are financial apps or data-heavy apps where you need to display a lot of information in a small space.
In this blogpost, we want to show you how to tweak the theming of the Infinite React DataGrid to make it more dense and maximise screen real estate.
Configuring the spacing in the DataGrid cells#
The CSS variable you want to target is
--infinite-cell-padding
- it's used to set the padding of the cells in the DataGrid. By default, the padding is set to var(--infinite-space-2) var(--infinite-space-3)
. This means that the padding is set to 4px 8px
for a root font size of 16px
. Default definition for --infinite-cell-padding
:root { --infinite-cell-padding: var(--infinite-space-2) var(--infinite-space-3); /* vertical horizontal */ --infinite-space-2: .25rem; /* 4px - for a root font size of 16px */ --infinite-space-3: .5rem; /* 8px */ }
COPY
You can override this variable in your CSS to make the padding smaller. For example, you can set the padding to
2px 4px
by setting the variable like this: Override the --infinite-cell-padding variable
body { --infinite-cell-padding: 2px 4px; }
COPY
Using rowHeight and cell padding to configure a dense mode in DataGrid cells
Configuring the spacing in the column headers#
For configuring padding inside column headers, you need to use the
--infinite-header-cell-padding
CSS var. Default definition for --infinite-header-cell-padding
:root { --infinite-header-cell-padding: var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x); --infinite-header-cell-padding-x: var(--infinite-space-3); --infinite-header-cell-padding-y: var(--infinite-space-3); }
COPY
You can make the padding smaller for example give it a value of
2px 4px
by setting the variable like this: Override the --infinite-header-cell-padding variable
body { --infinite-header-cell-padding: 2px 4px; }
COPY
Dense mode in both cells and column headers
The above demo also uses the
headerOptions.alwaysReserveSpaceForSortIcon
prop to make sure that the column headers don't reserve a space for the sort icon when the respective column is not sorted.Another option would be to override the CSS spacing scale that InfiniteTable defines - but that affects more than just the padding of the cells and headers.
Default values for the spacing scale
:root {
--infinite-space-1: .125rem;
--infinite-space-2: .25rem;
--infinite-space-3: .5rem;
--infinite-space-4: 0.75rem;
--infinite-space-5: 1rem;
}
COPY
You're encouraged to experiment with these variables to find the right balance for your app.