BootstrapBlazor-Table

原文地址： 

官网地址：https://www.blazor.zone

项目于码云Gitee上开源，传送门

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

Table 组件已经支持移动端适配，当屏幕小于 RenderModelResponsiveWidth 设定值时，组件渲染成卡片式方便查看数据，其默认值为 768

Table 组件有一个 RenderModel 属性，其默认值为 Auto 其他值定义如下

• Auto: 当屏幕小于 768px 时使用 CardView 模式，否则使用 Table 模式
• Table: 表格渲染模式，使用 table 元素进行数据渲染，适合宽屏幕下查看数据
• CardView：卡片式渲染模式，使用 div 元素进行数据渲染，适合窄屏幕下查看数据

Table 组件有一个 UseComponentWidth 属性，其默认值为 false，表示使用 window 宽度来进行判断，当设置值为 true 时，表示使用组件自身宽度进行判断

示例：

TableDemo.razor

1 <Table TItem="Demo" Items="@Items.Take(3)">
2     <TableColumns>
3         <TableColumn @bind-Field="@context.DateTime" Width="180" />
4         <TableColumn @bind-Field="@context.Name" />
5         <TableColumn @bind-Field="@context.Address" />
6     TableColumns>
7 Table>

Demo.cs

 1 public class Demo
 2 {
 3     /// <summary>
 4     ///
 5     /// summary> 8     [Display(Name = "姓名")]
 9     public string? Name { get; set; }
10 
11     /// <summary>
12     ///
13     /// summary>15     [Display(Name = "日期")]
16     public DateTime? DateTime { get; set; }
17 
18     /// <summary>
19     ///
20     /// summary>
21     [Display(Name = "地址")]24     public string? Address { get; set; }
25 }

展示效果

Attributes 属性

Methods 方法

TableColumn 属性

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor   

2、点击star，如下图，即可完成star，关注项目不迷路：

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　     BA & Blazor ①（795206915）　　　　　　　   BA & Blazor ②（675147445）