Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 fix(DataTable): the initial value set for selection is ineffective #2117

Merged
merged 4 commits into from
Aug 26, 2024
Merged

🐛 fix(DataTable): the initial value set for selection is ineffective #2117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67bea4f
🐛 fix(DataTable): the initial value set for selection is ineffective
capdiem Aug 26, 2024
901c0f5
💄 style: update the UI of checkbox
capdiem Aug 26, 2024
16940e8
add comments
capdiem Aug 26, 2024
03222e3
update docs
capdiem Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 119 additions & 118 deletions docs/Masa.Blazor.Docs/Examples/components/data-tables/RowSelection.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<MDataTable @bind-Value="_selected"
<MDataTable @bind-Selected="_selected"
Headers="_headers"
Items="_desserts"
SingleSelect="_singleSelect"
ItemKey="r=>r.Name"
ItemKey="r => r.Name"
ShowSelect
Class="elevation-1">
<TopContent>
<MSwitch @bind-Value="_singleSelect"
Label="Single select"
Class="pa-3"></MSwitch>
Class="pa-3">
</MSwitch>
</TopContent>
</MDataTable>

@code {
public class Dessert
@code {

private class Dessert
{
public string Name { get; set; }
public string? Name { get; set; }

public int Calories { get; set; }

Expand All @@ -25,125 +27,124 @@

public double Protein { get; set; }

public int Sodium { get; set; }

public string Calcium { get; set; }

public string Iron { get; set; }
public string? Iron { get; set; }
}

private List<DataTableHeader<Dessert>> _headers = new List<DataTableHeader<Dessert>>
private List<DataTableHeader<Dessert>> _headers = new()
{
new()
{
new ()
{
Text= "Dessert (100g serving)",
Align= DataTableHeaderAlign.Start,
Sortable= false,
Value= nameof(Dessert.Name)
},
new (){ Text= "Calories", Value= nameof(Dessert.Calories)},
new (){ Text= "Fat (g)", Value= nameof(Dessert.Fat)},
new (){ Text= "Carbs (g)", Value= nameof(Dessert.Carbs)},
new (){ Text= "Protein (g)", Value= nameof(Dessert.Protein)},
new (){ Text= "Iron (%)", Value= nameof(Dessert.Iron)}
};
Text = "Dessert (100g serving)",
Align = DataTableHeaderAlign.Start,
Sortable = false,
Value = nameof(Dessert.Name)
},
new() { Text = "Calories", Value = nameof(Dessert.Calories) },
new() { Text = "Fat (g)", Value = nameof(Dessert.Fat) },
new() { Text = "Carbs (g)", Value = nameof(Dessert.Carbs) },
new() { Text = "Protein (g)", Value = nameof(Dessert.Protein) },
new() { Text = "Iron (%)", Value = nameof(Dessert.Iron) }
};

private List<Dessert> _desserts = new List<Dessert>
{
new Dessert
{
Name = "Frozen Yogurt",
Calories = 159,
Fat = 6.0,
Carbs = 24,
Protein = 4.0,
Iron = "1%",
},
new Dessert
{
Name = "Ice cream sandwich",
Calories = 237,
Fat = 9.0,
Carbs = 37,
Protein = 4.3,
Iron = "1%",
},
new Dessert
{
Name = "Eclair",
Calories = 262,
Fat = 16.0,
Carbs = 23,
Protein = 6.0,
Iron = "7%",
},
new Dessert
{
new Dessert
{
Name= "Frozen Yogurt",
Calories= 159,
Fat= 6.0,
Carbs= 24,
Protein= 4.0,
Iron= "1%",
},
new Dessert
{
Name= "Ice cream sandwich",
Calories= 237,
Fat= 9.0,
Carbs= 37,
Protein= 4.3,
Iron= "1%",
},
new Dessert
{
Name= "Eclair",
Calories= 262,
Fat= 16.0,
Carbs= 23,
Protein= 6.0,
Iron= "7%",
},
new Dessert
{
Name= "Cupcake",
Calories= 305,
Fat= 3.7,
Carbs= 67,
Protein= 4.3,
Iron= "8%",
},
new Dessert
{
Name= "Gingerbread",
Calories= 356,
Fat= 16.0,
Carbs= 49,
Protein= 3.9,
Iron= "16%"
},
new Dessert
{
Name= "Jelly bean",
Calories= 375,
Fat= 0.0,
Carbs= 94,
Protein= 0.0,
Iron= "0%",
},
new Dessert
{
Name= "Lollipop",
Calories= 392,
Fat= 0.2,
Carbs= 98,
Protein= 0,
Iron= "2%",
},
new Dessert
{
Name= "Honeycomb",
Calories= 408,
Fat= 3.2,
Carbs= 87,
Protein= 6.5,
Iron= "45%",
},
new Dessert
{
Name= "Donut",
Calories= 452,
Fat= 25.0,
Carbs= 51,
Protein= 4.9,
Iron= "22%",
},
new Dessert
{
Name= "KitKat",
Calories= 518,
Fat= 26.0,
Carbs= 65,
Protein= 7,
Iron= "6%",
}
};
Name = "Cupcake",
Calories = 305,
Fat = 3.7,
Carbs = 67,
Protein = 4.3,
Iron = "8%",
},
new Dessert
{
Name = "Gingerbread",
Calories = 356,
Fat = 16.0,
Carbs = 49,
Protein = 3.9,
Iron = "16%"
},
new Dessert
{
Name = "Jelly bean",
Calories = 375,
Fat = 0.0,
Carbs = 94,
Protein = 0.0,
Iron = "0%",
},
new Dessert
{
Name = "Lollipop",
Calories = 392,
Fat = 0.2,
Carbs = 98,
Protein = 0,
Iron = "2%",
},
new Dessert
{
Name = "Honeycomb",
Calories = 408,
Fat = 3.2,
Carbs = 87,
Protein = 6.5,
Iron = "45%",
},
new Dessert
{
Name = "Donut",
Calories = 452,
Fat = 25.0,
Carbs = 51,
Protein = 4.9,
Iron = "22%",
},
new Dessert
{
Name = "KitKat",
Calories = 518,
Fat = 26.0,
Carbs = 65,
Protein = 7,
Iron = "6%",
}
};

private bool _singleSelect;

private IEnumerable<Dessert> _selected = new List<Dessert>();
}
private IEnumerable<string> _selected = new List<string>()
{
"Frozen Yogurt",
};

}
5 changes: 4 additions & 1 deletion docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,13 @@ arrays to both `SortBy` and `SortDesc` to programmatically control the sorting,

<masa-example file="Examples.components.data_tables.MultiSort"></masa-example>

#### ShowSelect
#### ShowSelect {updated-in=v1.7.0}

The `ShowSelect` prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default
row. You can also switch between allowing multiple selected rows at the same time or just one with the `SingleSelect` prop.
The `ItemKey` prop is used to specify a unique identifier for rows, which is used for row selection.

> In version 1.7.0, the `@bind-Selected` usage was added to replace `@bind-Value`, making it easier to set the default selected rows.

<masa-example file="Examples.components.data_tables.RowSelection"></masa-example>

Expand Down
5 changes: 4 additions & 1 deletion docs/Masa.Blazor.Docs/wwwroot/pages/components/data-tables/zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,12 @@ related:

<masa-example file="Examples.components.data_tables.MultiSort"></masa-example>

#### 行选择
#### 行选择 {#showselect updated-in=v1.7.0}

`ShowSelect` 属性将在默认表头中渲染一个复选框以切换所有行是否被选择，同时也为每个默认行渲染一个复选框。你还可以使用 `SingleSelect` 属性，指定能同时选择多行还是只能选择一行。
`ItemKey` 属性用于指定行的唯一标识，也是行选择的依据。

> 在 v1.7.0 版本中，新增了 `@bind-Selected` 用法来代替 `@bind-Value`，更方便设置默认选中的行。

<masa-example file="Examples.components.data_tables.RowSelection"></masa-example>

Expand Down
Loading
Loading