How to set different text alignment for content and header?
This article explains how to set differnet text alignment for content and header.
Problem discussion
Usually, the text alignment of the grid content and its header will be the same, which can be determined by the value given in the textAlign property of the grid columns.
Solution
This can be customized by using the textAlign and headerTextAlign properties of the JavaScript DataGrid columns. Value given in the textAlign property will be set to the content, whereas the value assigned to the headerTextAlign property will be applied to the column headers.
Define the Grid
Define the Grid columns with the textAlign and headerTextAlign properties.
import { Grid, Page } from '@syncfusion/ej2-grids';
import { orderData } from './data-source';
Grid.Inject(Page);
/**
* Default Grid sample
*/
let grid: Grid = new Grid(
{
dataSource: orderData,
allowPaging: true,
pageSettings: { pageSize: 7 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', headerTextAlign: 'Left' },
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right', headerTextAlign: 'Left' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right', headerTextAlign: 'Left' },
{ field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
grid.appendTo('#Grid');
Output
Figure 1: Grid with different header and content text align
Typescript demo: https://stackblitz.com/edit/1ocfpr?file=index.ts
Angular Demo: https://stackblitz.com/edit/angular-ov7ugm?file=app.component.html
React Demo: https://stackblitz.com/edit/react-4k3567?file=index.js
Conclusion
We hope you enjoyed learning about how to set different text alignment for content and header.
You can refer to our JavaScript DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback . We are always happy to assist you!
