Table 是一个功能丰富的现代化表格控件，参考 Ant Design Table 组件设计！

一、示例

二、文档

Table

中文名称

表格控件

控件优点

Table 是一个功能丰富的现代化表格控件，参考 Ant Design Table 组件设计，具有以下优点：

• 丰富的单元格类型：支持文本、数字、布尔值（开关）、图片、标签、进度条、链接、图标等多种类型
• 表头功能：支持显示/隐藏表头、固定表头、表头分割线
• 选择功能：支持复选框选择、全选/反选
• 行号显示：自动显示行号，支持自定义宽度
• 排序功能：支持点击表头排序
• 列宽调整：支持拖动调整列宽
• 斑马纹：支持奇偶行不同背景色
• 悬停高亮：鼠标悬停时行高亮
• 主题支持：实现 IThemeable 接口，支持亮暗主题切换
• 滚动支持：支持水平和垂直滚动，滚动条仅在悬停时显示
• 属性变更通知：实现 INotifyPropertyChanged 接口，属性修改即时生效

重要参数说明

Table 控件属性

TableColumn 列属性

TableCell 单元格属性

数据类型说明

枚举类型

ColumnAlign（对齐方式）

ColumnDataType（数据类型）

SortDirection（排序方向）

TableSummaryRow（汇总行）属性

TableSummaryCell（汇总单元格）属性

SummaryCalculator（汇总计算工具类）

CopyDataMode（点击复制模式）

重要事件

事件参数说明

TableCellEventArgs

TableRowEventArgs

ColumnSortEventArgs

RowCheckedEventArgs

公共方法

使用示例

基础使用

// 创建表格控件
var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    Bordered = true,
    ShowHeader = true,
    ShowRowNumber = true,
    Striped = true
};

// 添加列
table.Columns.Add(new TableColumn("name", "姓名"));
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center));
table.Columns.Add(new TableColumn("address", "地址"));
table.Columns.Add(new TableColumn("enabled", "是否启用", ColumnAlign.Center)
{
    DataType = ColumnDataType.Boolean
});

// 添加数据行
var row1 = new TableRow("row1");
row1.SetCellText("name", "张三");
row1.SetCellValue("age", 30);
row1.SetCellText("address", "北京市朝阳区");
row1.SetCellValue("enabled", true);
table.Rows.Add(row1);

var row2 = new TableRow("row2");
row2.SetCellText("name", "李四");
row2.SetCellValue("age", 25);
row2.SetCellText("address", "上海市浦东新区");
row2.SetCellValue("enabled", false);
table.Rows.Add(row2);

this.Controls.Add(table);

带复选框和排序

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    ShowCheckbox = true,
    Hoverable = true
};

// 添加可排序的列
var nameCol = new TableColumn("name", "姓名");
nameCol.Sortable = true;
table.Columns.Add(nameCol);

var priceCol = new TableColumn("price", "价格", ColumnAlign.Right);
priceCol.Sortable = true;
priceCol.DataType = ColumnDataType.Number;
table.Columns.Add(priceCol);

// 添加数据
for (int i = 1; i <= 10; i++)
{
    var row = new TableRow($"row{i}");
    row.Checkable = true;
    row.SetCellText("name", $"商品{i}");
    row.SetCellValue("price", 100 + i * 10);
    table.Rows.Add(row);
}

// 监听排序事件
table.ColumnSort += (sender, e) =>
{
    Console.WriteLine($"按 {e.Column.Title} {e.Direction} 排序");
    // 实现实际排序逻辑
    if (e.Direction == SortDirection.Ascending)
    {
        table.Rows = table.Rows.OrderBy(r => r.Cells["price"].Value).ToList();
    }
    else
    {
        table.Rows = table.Rows.OrderByDescending(r => r.Cells["price"].Value).ToList();
    }
};

this.Controls.Add(table);

进度条和标签列

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400)
};

table.Columns.Add(new TableColumn("task", "任务名称"));
table.Columns.Add(new TableColumn("progress", "进度", ColumnAlign.Center)
{
    DataType = ColumnDataType.Progress,
    Width = 150
});
table.Columns.Add(new TableColumn("status", "状态")
{
    DataType = ColumnDataType.Tag
});

// 添加数据
var row = new TableRow("row1");
row.SetCellText("task", "项目开发");

var progressCell = TableCell.ProgressCell(0.75f, Color.Green);
row.SetCell("progress", progressCell);

var tagCell = TableCell.TagCell(Color.Blue, "进行中", "重要");
row.SetCell("status", tagCell);

table.Rows.Add(row);

this.Controls.Add(table);

链接和图标列

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400)
};

table.Columns.Add(new TableColumn("name", "名称"));
table.Columns.Add(new TableColumn("icon", "图标", ColumnAlign.Center)
{
    DataType = ColumnDataType.Icon,
    Width = 60
});
table.Columns.Add(new TableColumn("action", "操作")
{
    DataType = ColumnDataType.Link
});

var row = new TableRow("row1");
row.SetCellText("name", "设置");
row.SetCell("icon", TableCell.IconCell("setting"));
row.SetCell("action", TableCell.LinkCell("点击查看", "#"));

table.Rows.Add(row);

this.Controls.Add(table);

图标+文本组合列

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    ShowRowNumber = true
};

// 图标+文本列
table.Columns.Add(new TableColumn("name", "姓名")
{
    DataType = ColumnDataType.IconText,
    Width = 120
});
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center));
table.Columns.Add(new TableColumn("status", "状态", ColumnAlign.Center)
{
    DataType = ColumnDataType.Tag
});

// 添加带图标的数据行
var icons = new[] { "user", "user", "user", "user", "user" };
var names = new[] { "张三", "李四", "王五", "赵六", "钱七" };

for (int i = 0; i < 5; i++)
{
    var row = new TableRow($"row{i + 1}");
    // 创建图标+文本单元格
    var iconCell = new TableCell
    {
        Text = names[i],
        IconSvg = icons[i],
        ForeColor = Color.Black
    };
    row.SetCell("name", iconCell);
    row.SetCellValue("age", 25 + i);
    row.SetCell("status", TableCell.TagCell(i % 2 == 0 ? Color.Green : Color.Blue, 
        i % 2 == 0 ? "在线" : "离线"));
    table.Rows.Add(row);
}

this.Controls.Add(table);

滚动和选择方法

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    ShowRowNumber = true,
    CopyData = CopyDataMode.CellAndRow  // 启用点击复制
};

// 添加多列
table.Columns.Add(new TableColumn("name", "姓名"));
table.Columns.Add(new TableColumn("department", "部门"));
table.Columns.Add(new TableColumn("position", "职位"));

// 添加大量数据（超过表格可见区域）
for (int i = 1; i <= 20; i++)
{
    var row = new TableRow($"row{i}");
    row.SetCellText("name", $"员工{i}");
    row.SetCellText("department", i % 3 == 0 ? "技术部" : (i % 3 == 1 ? "市场部" : "人事部"));
    row.SetCellText("position", i % 2 == 0 ? "经理" : "员工");
    table.Rows.Add(row);
}

this.Controls.Add(table);

// 监听行点击事件
table.RowClick += (sender, e) =>
{
    // 获取被点击的行数据
    var row = e.Row;
    Console.WriteLine($"点击了第 {e.RowIndex + 1} 行: {row.Cells["name"]?.Text}");
};

// 使用示例：
// 1. 设置选定行（通过索引）
table.SetSelectedRow(5);  // 选中第6行

// 2. 滚动到指定行
table.ScrollLine(10);  // 滚动到第11行

// 3. 滚动到最底部
table.ScrollToEnd();  // 滚动到最后一页

// 4. 获取指定行数据
var rowData = table.GetRow(0);  // 获取第1行数据
if (rowData != null)
{
    Console.WriteLine($"第1行姓名: {rowData.Cells["name"]?.Text}");
}

// 5. 获取行总数
Console.WriteLine($"总行数: {table.RowCount}");

// 6. 滚动到指定列
table.ScrollColumn(2);  // 滚动到第3列

主题适配

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    FollowGlobalTheme = true  // 跟随全局主题
};

// 手动设置主题
table.ApplyTheme(ThemeMode.Dark);

// 监听属性变更
table.PropertyChanged += (sender, e) =>
{
    Console.WriteLine($"属性 {e.PropertyName} 已变更");
};

自定义滚动条颜色

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(600, 400),
    ScrollBarColor = Color.FromArgb(180, 180, 180),  // 自定义滚动条颜色
    ShowRowNumber = true
};

完整示例：综合使用

// 创建表格
var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(800, 500),
    Bordered = true,
    ShowHeader = true,
    ShowRowNumber = true,
    ShowCheckbox = true,
    Striped = true,
    Hoverable = true,
    BorderRadius = 8,
    CellPadding = 10
};

// 添加列定义
table.Columns.Add(new TableColumn("name", "姓名") { Width = 120 });
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("registerDate", "注册日期") { Width = 150 });
table.Columns.Add(new TableColumn("status", "状态", ColumnAlign.Center) 
    { DataType = ColumnDataType.Tag, Width = 100 });
table.Columns.Add(new TableColumn("progress", "进度", ColumnAlign.Center) 
    { DataType = ColumnDataType.Progress, Width = 120 });
table.Columns.Add(new TableColumn("score", "评分", ColumnAlign.Center) 
    { DataType = ColumnDataType.Number, Width = 80 });
table.Columns.Add(new TableColumn("active", "活跃", ColumnAlign.Center) 
    { DataType = ColumnDataType.Boolean, Width = 80 });
table.Columns.Add(new TableColumn("link", "链接") { DataType = ColumnDataType.Link });
table.Columns.Add(new TableColumn("action", "操作"));

// 添加数据
var statusColors = new[] { Color.Green, Color.Blue, Color.Orange, Color.Red };
var statusTexts = new[] { "正常", "异常", "处理中", "已完成" };

for (int i = 1; i <= 20; i++)
{
    var row = new TableRow($"row{i}");
    row.Checkable = true;
  
    // 姓名列（带图标）
    var nameCell = new TableCell
    {
        Text = $"用户{i}",
        IconSvg = "user",
        ForeColor = Color.Black
    };
    row.SetCell("name", nameCell);
  
    row.SetCellValue("age", 20 + i % 15);
    row.SetCellText("registerDate", $"2024-0{i % 12 + 1}-{i % 28 + 1:00} 08:59:33");
    row.SetCell("status", TableCell.TagCell(statusColors[i % 4], statusTexts[i % 4]));
    row.SetCell("progress", TableCell.ProgressCell(i * 0.05f, Color.FromArgb(24, 144, 255)));
    row.SetCellValue("score", 80 + i % 20);
    row.SetCellValue("active", i % 3 != 0);
    row.SetCell("link", TableCell.LinkCell($"链接{i}", "#"));
  
    // 操作列（按钮组）
    var buttons = new List<TableCellButton>
    {
        new TableCellButton("新增", Color.Green),
        new TableCellButton("删除", Color.Red),
        new TableCellButton("详情", Color.Blue)
    };
    row.SetCell("action", TableCell.ButtonCell(buttons));
  
    table.Rows.Add(row);
}

// 事件处理
table.RowClick += (sender, e) =>
{
    MessageBox.Show($"点击了第 {e.RowIndex + 1} 行");
};

table.RowChecked += (sender, e) =>
{
    var checkedRows = table.GetCheckedRows();
    Console.WriteLine($"当前选中 {checkedRows.Count} 行");
};

this.Controls.Add(table);

表标题栏

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(800, 500),
    Bordered = true,
    ShowHeader = true,
    ShowRowNumber = true
};

// 添加列
table.Columns.Add(new TableColumn("name", "姓名") { Width = 100 });
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("department", "部门") { Width = 120 });
table.Columns.Add(new TableColumn("position", "职位") { Width = 100 });
table.Columns.Add(new TableColumn("salary", "工资", ColumnAlign.Right) { Width = 100 });

// 添加数据
for (int i = 1; i <= 15; i++)
{
    var row = new TableRow($"row{i}");
    row.SetCellText("name", $"员工{i}");
    row.SetCellValue("age", 25 + i % 10);
    row.SetCellText("department", i % 3 == 0 ? "技术部" : (i % 3 == 1 ? "市场部" : "人事部"));
    row.SetCellText("position", i % 2 == 0 ? "经理" : "员工");
    row.SetCellValue("salary", 5000 + i * 500);
    table.Rows.Add(row);
}

// 设置表标题
table.ShowTitle = true;
table.Title = "员工信息表";
table.TitleHeight = 45;
table.TitleAlign = ColumnAlign.Center;
table.TitleBackColor = ColorTranslator.FromHtml("#1890ff");  // 蓝色背景
table.TitleForeColor = Color.White;  // 白色文字
table.TitleFont = new Font("微软雅黑", 14, FontStyle.Bold);

this.Controls.Add(table);

汇总行（带单元格合并）

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(800, 500),
    Bordered = true,
    ShowHeader = true,
    ShowRowNumber = true,
    ShowCheckbox = true
};

// 添加9列（不含序号和复选框）
// name, age, date, status, progress, score, active, link, action
table.Columns.Add(new TableColumn("name", "姓名") { Width = 100 });
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("date", "日期") { Width = 120 });
table.Columns.Add(new TableColumn("status", "状态", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("progress", "进度", ColumnAlign.Center) { Width = 100 });
table.Columns.Add(new TableColumn("score", "评分", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("active", "活跃", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("link", "链接") { Width = 100 });
table.Columns.Add(new TableColumn("action", "操作") { Width = 100 });

// 添加数据
for (int i = 1; i <= 20; i++)
{
    var row = new TableRow($"row{i}");
    row.Checkable = true;
    row.SetCellText("name", $"用户{i}");
    row.SetCellValue("age", 20 + i % 15);
    row.SetCellText("date", $"2024-0{i % 12 + 1}-{i % 28 + 1:00}");
    row.SetCellText("status", i % 2 == 0 ? "正常" : "异常");
    row.SetCellValue("progress", i * 0.05f);
    row.SetCellValue("score", 80 + i % 20);
    row.SetCellValue("active", i % 3 != 0);
    row.SetCellText("link", $"链接{i}");
    row.SetCellText("action", "详情");
    table.Rows.Add(row);
}

// 使用 SummaryCalculator 计算年龄平均值
double avgAge = SummaryCalculator.Average(table.Rows, "age", 0, 19);

// 创建汇总行
var summaryRow = new TableSummaryRow();
// 合并5列显示"平均年龄"
// 列顺序：name(1) + age(1) + date(1) + status(1) + progress(1) = 5列
summaryRow.AddCell("name", "平均年龄", 5, align: ColumnAlign.Left);
// 合并2列显示年龄平均值
summaryRow.AddCell("score", avgAge.ToString("N2"), 2, align: ColumnAlign.Center);
// 合并2列显示备注
summaryRow.AddCell("link", "（仅供参考）", 2, align: ColumnAlign.Right);

table.SummaryRow = summaryRow;
table.ShowSummary = true;

this.Controls.Add(table);

表标题 + 汇总行组合

var table = new Table
{
    Location = new Point(20, 20),
    Size = new Size(800, 500),
    Bordered = true,
    ShowHeader = true,
    ShowRowNumber = true,
    ShowCheckbox = true,
    Striped = true
};

// 添加列
table.Columns.Add(new TableColumn("name", "姓名") { Width = 100 });
table.Columns.Add(new TableColumn("age", "年龄", ColumnAlign.Center) { Width = 80 });
table.Columns.Add(new TableColumn("department", "部门") { Width = 120 });
table.Columns.Add(new TableColumn("position", "职位") { Width = 100 });
table.Columns.Add(new TableColumn("salary", "工资", ColumnAlign.Right) { Width = 100 });

// 添加数据
for (int i = 1; i <= 20; i++)
{
    var row = new TableRow($"row{i}");
    row.Checkable = true;
    row.SetCellText("name", $"员工{i}");
    row.SetCellValue("age", 25 + i % 10);
    row.SetCellText("department", i % 3 == 0 ? "技术部" : (i % 3 == 1 ? "市场部" : "人事部"));
    row.SetCellText("position", i % 2 == 0 ? "经理" : "员工");
    row.SetCellValue("salary", 5000 + i * 500);
    table.Rows.Add(row);
}

// 设置表标题
table.ShowTitle = true;
table.Title = "员工信息表";
table.TitleHeight = 40;
table.TitleAlign = ColumnAlign.Center;
table.TitleBackColor = ColorTranslator.FromHtml("#018b8d");  // 马尔斯绿
table.TitleForeColor = Color.White;

// 设置汇总行
var summaryRow = new TableSummaryRow();
double avgAge = SummaryCalculator.Average(table.Rows, "age", 0, 19);
double totalSalary = SummaryCalculator.Sum(table.Rows, "salary", 0, 19);

// 合并前3列显示标题
summaryRow.AddCell("name", "统计信息", 3, align: ColumnAlign.Center);
// 合并age列显示平均年龄
summaryRow.AddCell("age", $"平均{avgAge:F1}岁", 1, align: ColumnAlign.Center);
// 合并后2列显示工资汇总
summaryRow.AddCell("salary", $"合计:{totalSalary:N0}", 1, align: ColumnAlign.Right);

table.SummaryRow = summaryRow;
table.ShowSummary = true;

this.Controls.Add(table);

使用16进制颜色

// C# 中可以使用 ColorTranslator.FromHtml 将16进制颜色转为 Color
table.TitleBackColor = ColorTranslator.FromHtml("#1890ff");  // 蓝色
table.TitleForeColor = ColorTranslator.FromHtml("#ffffff");   // 白色
table.BorderColor = ColorTranslator.FromHtml("#e0e0e0");     // 浅灰色

// 也可以直接使用 Color.FromArgb
table.HoverBackColor = Color.FromArgb(230, 247, 255);  // RGB方式

界面布局说明

表格整体布局如下：

┌─────────────────────────────────────────────────────────────────┐
│                         表标题栏（可自定义）                      │ ← 表标题（ShowTitle）
├─────────────────────────────────────────────────────────────────┤
│ [行号] [复选框] 列1标题        列2标题        列3标题         │ ← 表头（可固定）
├─────────────────────────────────────────────────────────────────┤
│ [  1 ] [☑]     单元格内容     单元格内容     单元格内容       │
│ [  2 ] [☐]     单元格内容     单元格内容     单元格内容       │ ← 斑马纹效果
│ [  3 ] [☑]     单元格内容     单元格内容     单元格内容       │
│ ...                                                           │
├─────────────────────────────────────────────────────────────────┤
│                       汇总行（可合并单元格）                    │ ← 汇总行（ShowSummary）
└─────────────────────────────────────────────────────────────────┘
         ↓ 垂直滚动条（悬停时显示）        ↓ 水平滚动条（悬停时显示）

主题颜色映射

注意事项

1. 列宽调整：拖动列边界可调整列宽，最小宽度为50像素，最大宽度为500像素

2. 排序功能：点击可排序列的表头会触发排序事件，需要在事件处理中实现实际的排序逻辑

3. 复选框选择：只有设置了 Checkable = true 的行才能被勾选

4. 图片单元格：建议使用较小的图片尺寸，避免影响性能

5. 主题切换：设置 FollowGlobalTheme = true 后，控件会自动跟随全局主题变化

6. 滚动性能：大量数据时建议启用虚拟滚动优化（后续版本支持）

7. 滚动条显示：滚动条仅在鼠标悬停在表格上时显示，移开后自动隐藏

8. 属性变更通知：所有属性都实现了 INotifyPropertyChanged 接口，修改属性后会立即触发 PropertyChanged 事件

9. 行号宽度：行号列宽度固定为60像素，以确保两位数序号能完整显示

10. 索引规则：

    • 数据行索引从0开始，RowIndex = 0 对应第一行数据
    • 列索引从0开始，ColumnIndex = 0 对应第一列数据列
    • 行号列和复选框列不计入实际列索引
    • 汇总行不计入数据行索引

更新日志

v1.4.0

• 新增公共方法：
  • SetSelectedRow(int index)：通过索引设置选定行
  • GetRow(int index)：获取指定行数据
  • ScrollLine(int rowIndex)：滚动到指定行
  • ScrollColumn(int colIndex)：滚动到指定列
  • ScrollToEnd()：滚动到最底部
• 新增属性：
  • CopyData：点击复制模式（Cell/Row/Column/CellAndRow/All）
  • RowCount：只读属性，返回行总数
• 修复格线粗细不一致问题（表头下边框与其他格线统一为0.5f）

v1.3.0

• 实现 INotifyPropertyChanged 接口，所有属性修改即时生效
• 添加 ScrollBarColor 属性，支持自定义滚动条颜色
• 滚动条仅在鼠标悬停时显示
• 优化行号列宽度为60像素，确保两位数序号完整显示
• 修复图标+文本单元格显示重叠问题
• 优化表格边框线宽度为0.5像素，更细更美观