Introduction When working with React Pivot Table, there might be scenarios where you need to customize the font styles, including font size, font family, and font style across different elements of the pivot table like the row headers, column headers, and value cells. This customization can significantly enhance the readability and aesthetic appeal of the pivot table. This article will guide you on how to achieve this customization using CSS. Customizing font styles To customize the font styles of the row headers, value cells, and column headers in a pivot table, you need to target these elements specifically using their respective CSS classes. The example below illustrates how to set the font-size, font-family, and font-style properties for the mentioned pivot table elements. [index.css] .e-pivotview .e-rowsheader .e-cellvalue, /* target the rows headers */ .e-pivotview .e-headercell .e-cellvalue, /* target the columns headers */ .e-pivotview .e-headertext, /* target the values header */ .e-pivotview .e-grid .e-rowcell { /* target the values cells */ font-size: 18px !important; /* Setting the font size */ font-family: sans-serif !important; /* Setting the font family */ font-style: italic !important; /* Setting the font style */ } Here’s a breakdown of how the code works: Row headers customization: The row headers in the pivot table have been customized with specific font styles by targeting the CSS selector .e-pivotview .e-rowsheader .e-cellvalue. Column headers customization: To customize the font styles for column headers in the pivot table, we are targeting the CSS selector .e-pivotview .e-headercell .e-cellvalue. Value headers customization: Customization of the value headers in the pivot table is achieved through the use of the CSS selector .e-pivotview .e-headertext. Value cell customization: By targeting the CSS selector .e-pivotview .e-grid .e-rowcell, customization is achieved for the value cells in the pivot table. Finally, each of these elements is assigned a font-size of 18 pixels, a sans-serif font-family, and an italic font-style. NOTE When customizing the styles, the !important rule is used to ensure that these custom styles have higher specificity than the default styles applied by the library. This ensures your customizations take effect. The following screenshots portray the difference between before and after customizing font styles, Before customization After customization For a practical demonstration, refer to the sample of stackblitz. Additional references Apply custom styles to the pivot table headers Customize the style of the pivot table header, value, and summary cells. Conclusion By customizing the CSS properties as shown in the example, you can effectively change the font styles for the entire contents of a React Pivot Table, including row headers, value cells, and column headers. You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on 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 questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Introduction In certain scenarios, you may want to personalize the appearance of your header cells to enhance readability and improve the presentation of data. This article explains how to apply custom styles to the row and column headers of the Blazor Pivot Table. Customizing row and column headers To customize the header styles of a pivot table, you can target the built-in CSS classes associated with the pivot table’s header cells. Here’s an example of how you can change the background color and font family of both column and row headers. [Index.razor] <style> /* Customize the column headers here. */ .e-pivotview .e-headercell { background-color: thistle !important; font-family: cursive; } /* Customize the row headers here. */ .e-pivotview .e-rowsheader { background-color: skyblue !important; font-family: 'Franklin Gothic Medium'; } </style> In the above code snippet, we are targeting the CSS classes .e-headercell and .e-rowsheader within the .e-pivotview container. These classes represent the column headers and row headers, respectively. Inside the curly braces, you can define the styles that you want to apply. In this example, we have set the background-color property to thistle for the column headers and skyblue for the row headers. Additionally, we have modified the font-family of the column header to cursive and the row header to Franklin Gothic Medium. By applying these styles, you can easily personalize the appearance of the pivot table headers. The following screenshot portrays the results of the code snippet mentioned above. Screenshot For a practical demonstration, refer to the sample of blazor playground. Conclusion: I hope you enjoyed learning how to apply custom styles to the Blazor Pivot Table headers. You can also refer to our Blazor Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on 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, support portal, or feedback portal. We are always happy to assist you!
Introduction In certain scenarios, you may want to personalize the appearance of your header cells to enhance readability and improve the presentation of data. This article explains how to apply custom styles to the row and column headers of React Pivot Table. Customizing row and column headers To customize the header styles of a pivot table, you can target the built-in CSS classes associated with the pivot table’s header cells. Here’s an example of how you can change the background color and font family of both column and row headers. [index.css] /* Customize the column headers here. */ .e-pivotview .e-headercell { background-color: thistle !important; font-family: cursive; } /* Customize the row headers here. */ .e-pivotview .e-rowsheader { background-color: skyblue !important; font-family: 'Franklin Gothic Medium'; } In the above code snippet, we are targeting the CSS classes .e-headercell and .e-rowsheader within the .e-pivotview container. These classes represent the column headers and row headers, respectively. Inside the curly braces, you can define the styles that you want to apply. In this example, we have set the background-color property to thistle for the column headers and skyblue for the row headers. Additionally, we have modified the font-family of the column header to cursive and the row header to Franklin Gothic Medium. By applying these styles, you can easily personalize the appearance of the pivot table headers. The following screenshot portrays the results of the code snippet mentioned above. Screenshot For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you enjoyed learning how to apply custom styles to the pivot table headers. You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on 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, support portal, or feedback portal. We are always happy to assist you!
By customizing the HeaderTemplate, we can display the required information in Header of the TileViewItem. For instance, we have added extra button (“Settings button”) in the Header of the TileViewItem. The following code example demonstrate the same, HeaderTemplate : <DataTemplate x:Key="TileViewHeaderTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding}"/> <ToggleButton Margin="0" Grid.Column="2" BorderThickness="0" Background="Transparent" Command="{Binding SettingCommand}" DataContext="{Binding DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type syncfusion:TileViewControl}}}"> <Path Data="M31.679651,15.723C22.841078,15.723 15.677,22.887022 15.677,31.724249 15.677,40.562878 22.841078,47.727002 31.679651,47.727002 40.518124,47.727002 47.682003,40.562878 47.682003,31.724249 47.682003,22.887022 40.518124,15.723 31.679651,15.723z M25.174641,0L30.947304,8.1649995 30.977009,8.163671C31.891628,8.1361193,32.811726,8.1617675,33.732849,8.2423577L34.116646,8.2807278 40.096367,0.5289996 49.181995,4.5158782 47.510448,14.236901 47.626137,14.339919C48.479649,15.11912,49.268909,15.955267,49.990528,16.839653L50.234638,17.14785 60.403648,15.836 64.007996,25.079203 55.322643,31.217757 55.324234,31.258986C55.34618,32.174153,55.314838,33.094563,55.22847,34.015755L55.226952,34.030385 63.345997,40.294331 59.359104,49.380002 49.249798,47.645153 49.143776,47.764214C48.695721,48.255009,48.228832,48.72456,47.744774,49.172226L47.324875,49.549786 48.723995,60.394425 39.48156,64 33.403603,55.403061 33.023663,55.43042C32.149929,55.481137,31.270197,55.483376,30.38839,55.435608L29.679308,55.383191 23.130268,63.875 14.041999,59.886834 15.844025,49.393521 15.71986,49.282948C15.207753,48.815411,14.718776,48.32737,14.253661,47.820706L13.803129,47.315312 3.612031,48.630002 0.0080004195,39.385499 8.0905037,33.673707 8.0481892,33.048829C7.9875851,31.908507,8.0095654,30.758269,8.1175261,29.606822L8.1191311,29.59272 0,23.328246 3.9867127,14.242 14.093521,15.978928 14.104487,15.966273C15.033746,14.935561,16.045525,13.997155,17.124784,13.156928L17.159048,13.131042 15.929999,3.6040602z" Stretch="Uniform" Fill="White" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"> <Path.RenderTransform> <TransformGroup> <TransformGroup.Children> <RotateTransform Angle="0" /> <ScaleTransform ScaleX="1" ScaleY="1" /> </TransformGroup.Children> </TransformGroup> </Path.RenderTransform> </Path> </ToggleButton> </Grid> </DataTemplate> Mainwindow.xaml : <syncfusion:TileViewControl Name="tileViewControl1" HeaderTemplate="{StaticResource TileViewHeaderTemplate}"> <syncfusion:TileViewItem Header="TileItem1" CloseButtonVisibility="Visible"> Content of TileItem </syncfusion:TileViewItem> <syncfusion:TileViewItem Header="TileItem2" CloseButtonVisibility="Visible"> Content of TileItem </syncfusion:TileViewItem> <syncfusion:TileViewItem Header="TileItem3" CloseButtonVisibility="Visible"> Content of TileItem </syncfusion:TileViewItem> </syncfusion:TileViewControl> Mainwindow.cs: public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = this; } private ICommand settingcommand; public ICommand SettingCommand { get { if (settingcommand == null) { settingcommand = new DelegateCommand(ExecuteCommand, CanExecute); } return settingcommand; } set { settingcommand = value; } } private bool CanExecute(object arg) { return true; } private void ExecuteCommand(object obj) { Console.WriteLine("Settings button is clicked"); } } Screenshot: Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TileView_Sample1967831717.zip
In TreeGrid, we can dynamically update all the inner properties available in column property. And, we can include/exclude the TreeGrid columns dynamically by using “setModel” method. Please find the code example to modify “headerText” and “textAlign” column property. <button onclick="clickme()" style="margin-bottom:10px">Update Column</button> <div id="TreeGridContainer" style="height:400px;width:100%"></div> <script type="text/javascript"> $(function () { $("#TreeGridContainer").ejTreeGrid({ // columns: [ { field: "taskID", headerText: "Task Id", editType: "numericedit", width: "60" }, { field: "taskName", headerText: "Task Name", editType: "stringedit", }, { field: "startDate", headerText: "Start Date", editType: "datepicker", textAlign: ej.TextAlign.Center }, { field: "progress", headerText: "Progress", editType: "numericedit",textAlign:ej.TextAlign.Right } ] }) }); //To dynamically update the TreeGrid columns function clickme() { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"), clonedColumns = $.extend([], treeObj.model.columns), duration = { field: "duration", headerText: "Duration", duration: "numericedit" }; clonedColumns[0].headerText = "Id"; clonedColumns[1].headerText = "Name"; clonedColumns[3].headerText = "Percent Done"; clonedColumns[2].textAlign = ej.TextAlign.Right; clonedColumns[3].textAlign = ej.TextAlign.Center; //To include new column dynamically clonedColumns.push(duration); treeObj.setModel({ "columns": clonedColumns }); } </script> The following output is displayed as a result of the above code example. Sample Please find the sample to customize the TreeGrid column properties. Sample
You can customize the header of the SfCalendar by using the HeaderTemplate property. This article explains how to customize the header of the SfCalendar to display only the month. Customizing the header of the SfCalendar: Define the converter as a Resource. Create a TextBlock and set it as the HeaderTemplate of the SfCalendar. Bind the DisplayDate of the SfCalendar to the Text property of the TextBlock with reference to the converter. <Page.Resources> <local:CalendarHeaderFormater x:Key="HeaderFormater"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Input:SfCalendar x:Name="calendar" ShowNavigationButton="True" Height="300" Width="500"> <Input:SfCalendar.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding ElementName=calendar, Path=DisplayDate, Converter={StaticResource HeaderFormater}}" FontSize="22" Margin="0 5" HorizontalAlignment="Center"/> </DataTemplate> </Input:SfCalendar.HeaderTemplate> </Input:SfCalendar> </Grid> Create a UWP application and add the SfCalendar to it. Define a converter class with reference to the IValueConverter interface. In the Convert method, return the date in the month format. public class CalendarHeaderFormater : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { DateTime data; CultureInfo currentculture = parameter as CultureInfo; bool isvalid = DateTime.TryParse(value.ToString(), out data); if (isvalid) { return data.ToString("MMMM", currentculture); } else { return null; } } } The following screenshot displays the output of the above code. ConclusionI hope you enjoyed learning about how to customize the header of the UWP Calendar.You can refer to our UWP Calendar 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 UWP Calendar example to understand how to create and manipulate data.For current customers, you can check out our Xamarin 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, Direct-Trac, or feedback portal. We are always happy to assist you!
