How to change Table's head

[dlyltm]

How to change Table's header, such as color and alignment.

[GevorDanielyan]

<Table>
    <TableHeader>
        <th class="text-center text-danger">Header 1</th>
        <th class="text-center text-warning">Header 2</th>
        <th class="text-center text-success">Header 3</th>
    </TableHeader>
    <TableBody>
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        <tr>
    </TableBody>
</Table>

In this example, the class attribute is used to apply CSS classes to the table header cells (th components). The text-center class is used to center the header text, and the text-danger, text-warning, and text-success classes are used to change the header's background color.
You can modify the CSS classes to apply any other styles you want to the table header.

If this doesn't work for you please write here.

[stsrki]

Also, for a fully Blazorise way you can do

<Table>
    <TableHeader>
        <TableHeaderCell TextAlignment="TextAlignment.Center" TextColor="TextColor.Danger">Header 1</TableHeaderCell>
        <TableHeaderCell TextAlignment="TextAlignment.Center" TextColor="TextColor.Warning">Header 2</TableHeaderCell>
        <TableHeaderCell TextAlignment="TextAlignment.Center" TextColor="TextColor.Success">Header 3</TableHeaderCell>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell>Row 1, Column 1</TableRowCell>
            <TableRowCell>Row 1, Column 2</TableRowCell>
            <TableRowCell>Row 1, Column 3</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell>Row 2, Column 1</TableRowCell>
            <TableRowCell>Row 2, Column 2</TableRowCell>
            <TableRowCell>Row 2, Column 3</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

[dlyltm]

Excuse me, can the method in Blazories be applied to Ant Design? For example,I set up Ant Design Table as follows:
`

<GenerateColumns Range="1.." Definitions=definitions />

<ActionColumn Title="Action">
    <Space Size=@("middle")>
        <SpaceItem>
            <a>Invite @context.Name</a>
        </SpaceItem>
        <SpaceItem>
            <a>Delete</a>
        </SpaceItem>
    </Space>
</ActionColumn>

` How do I change the header?

[stsrki]

I'm not familiar with those components. Are they yours custom-made?

[dlyltm]

They belong to Ant Design Blazor, not my custom-made.

[stsrki]

I really can't answer that question as I haven't worked with Ant Design Blazor. In theory, it should work but how to customize their component is out of my area of knowledge.

[dlyltm]

Sorry,it seems that I made a mistake. What I wanted to ask was about Ant Design Blazoor's Table.

[stsrki]

Sorry,it seems that I made a mistake. What I wanted to ask was about Ant Design Blazoor's Table.

In that case, look at my response. It should work for all Blazorise CSS providers.