Column Alignment in Grid Component
By default, all columns in IntegralUI Grid web component have their content aligned on left side, including column header, body and footer. You can change this, by setting a corresponding field in column object to a different value: 'left, 'center' or 'right'.
A sample code that shows align column content to left, center or right side is available in JavaScript, Angular, React and Vue, in following sections below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, using the control panel on right side you can select a column and choose the alignment of its header, content and footer. Whenever a new alignment is selected, the grid view is updated. Some of these columns don't have anything in their footer, to see how it works for column footer, use the last two columns.
In following sections below, you can find sample code in JavaScript, Angular, React and Vue.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Align Content of Grid Columns
The alignment of grid columns is determined by following fields in column object:
- contentAlignment - specifies the side at which content of column cells is aligned
- footerAlignment- specifies the side at which content of column footer is aligned
- headerAlignment- specifies the side at which content of column header is aligned
All of these fields accepts one of these string values: 'left', 'center' or 'right', based on which the content is aligned to left, center or right side accordingly.
Here is an example on you can set this in code:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Having different alignment for columns is useful in cases when you have different type of values. Usually strings in columns are aligned on left side, decimal numbers on right side, integer numbers or dates are centered etc.
Conclusion
IntegralUI Grid component for JavaScript, Angular, React and Vue comes with built-in feature that allows you to align column content, header and footer easily and for each column individually. Based on column data type you can either align the content on left, center or right side.
The Grid is a native Web Component, part of IntegralUI Web that you can use to develop web applications in any JavaScript framework.