DemoTable.razor

<DocMatTable></DocMatTable>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        <MatTable Items="@cars" class="mat-elevation-z5" OnRowsGenerating="() => TestRowGenerating()">
            <MatColGroup>
                <colgroup>
                    <col span="1" style="width: 60%;">
                    <col span="1" style="width: auto;">
                    <col span="1" style="width: auto;">
                </colgroup>
            </MatColGroup>
            <MatTableHeader>
                <th>Name</th>
                <th>Price</th>
                <th>Horsepower</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@String.Format("${0:f2}", @context.Price)</td>
                <td>@context.Horsepower</td>
            </MatTableRow>
        </MatTable>

        @code
        {
            void TestRowGenerating()
            {
                System.Diagnostics.Debug.WriteLine("RowGenerating called successful.");
            }

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }
                public int Horsepower { get; set; }

                public Car(string name, double price, int horsepower)
                {
                    Name = name;
                    Price = price;
                    Horsepower = horsepower;
                }
            }

            Car[] cars = new[]
            {
                new Car("Volkswagen Golf", 10000, 220),
                new Car("Volkswagen Passat", 11000, 240),
                new Car("Volkswagen Polo", 12000, 110),
                new Car("Ford Focus", 13000, 200),
                new Car("Ford Fiesta", 14000, 160),
                new Car("Ford Fusion", 15000, 260),
                new Car("Ford Mondeo", 16000, 120),
            };

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""@cars"" class=""mat-elevation-z5"" OnRowsGenerating=""() => TestRowGenerating()"">
            <MatColGroup>
                <colgroup>
                    <col span=""1"" style=""width: 60%;"">
                    <col span=""1"" style=""width: auto;"">
                    <col span=""1"" style=""width: auto;"">
                </colgroup>
            </MatColGroup>
            <MatTableHeader>
                <th>Name</th>
                <th>Price</th>
                <th>Horsepower</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@String.Format(""${0:f2}"", @context.Price)</td>
                <td>@context.Horsepower</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }
                public int Horsepower { get; set; }

                public Car(string name, double price, int horsepower)
                {
                    Name = name;
                    Price = price;
                    Horsepower = horsepower;
                }
            }

            Car[] cars = new[]
            {
                new Car(""Volkswagen Golf"", 10000, 220),
                new Car(""Volkswagen Passat"", 11000, 240),
                new Car(""Volkswagen Polo"", 12000, 110),
                new Car(""Ford Focus"", 13000, 200),
                new Car(""Ford Fiesta"", 14000, 160),
                new Car(""Ford Fusion"", 15000, 260),
                new Car(""Ford Mondeo"", 16000, 120),
            };

            void TestRowGenerating()
            {
                System.Diagnostics.Debug.WriteLine(""RowGenerating called successful."");
            }


        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Filter Example, Pull Data from API, Single Row Selection / Hover</h5>
<DemoContainer>
    <Content>
        <MatTable Items="@todos" LoadInitialData="true" Striped="true" RequestApiOnlyOnce="true" AllowSelection="true" RowClass="tester"
                  ApiUrl="https://jsonplaceholder.typicode.com/todos" FilterByColumnName="Title" DebounceMilliseconds="150" class="mat-elevation-z5">
            <MatTableHeader>
                <th>Id</th>
                <th>Completed</th>
                <th>Todo</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@String.Format("{0:d}", @context.Id)</td>
                <td>@context.Completed</td>
                <td>@context.Title</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Todo
            {
                public int UserId { get; set; }
                public int Id { get; set; }
                public string Title { get; set; }
                public bool Completed { get; set; }

                public Todo()
                {
                }
            }

            Todo[] todos;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""@todos"" LoadInitialData=""true"" Striped=""true"" RequestApiOnlyOnce=""true"" AllowSelection=""true"" RowClass=""tester""
                  ApiUrl=""https://jsonplaceholder.typicode.com/todos"" FilterByColumnName=""Title"" DebounceMilliseconds=""150"" class=""mat-elevation-z5"">
            <MatTableHeader>
                <th>Id</th>
                <th>Completed</th>
                <th>Todo</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@String.Format(""{0:d}"", @context.Id)</td>
                <td>@context.Completed</td>
                <td>@context.Title</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Todo
            {
                public int UserId { get; set; }
                public int Id { get; set; }
                public string Title { get; set; }
                public bool Completed { get; set; }

                public Todo()
                {
                }
            }

            Todo[] todos;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example with sort header table</h5>
<DemoContainer>
    <Content>
        <MatTable Items="@sortedData" class="mat-elevation-z5" ShowPaging="false" UseSortHeaderRow="true">
            <MatTableHeader>
                <MatSortHeaderRow SortChanged="@SortData">
                    <MatSortHeader SortId="name"><span style="width:600px">Dessert (100g)</span></MatSortHeader>
                    <MatSortHeader SortId="calories">Calories</MatSortHeader>
                    <MatSortHeader SortId="fat">Fat (g)</MatSortHeader>
                    <MatSortHeader SortId="carbs">Carbs (g)</MatSortHeader>
                    <MatSortHeader SortId="protein">Protein (g)</MatSortHeader>
                </MatSortHeaderRow>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@context.Calories</td>
                <td>@context.Fat</td>
                <td>@context.Carbs</td>
                <td>@context.Protein</td>
            </MatTableRow>
        </MatTable>

        @code
        {
            class Dessert
            {
                public int Calories { get; set; }
                public int Carbs { get; set; }
                public int Fat { get; set; }
                public string Name { get; set; }
                public int Protein { get; set; }
            }

            Dessert[] desserts = new[]
            {
                new Dessert() {Name = "Frozen yogurt", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
                new Dessert() {Name = "Ice cream sandwich", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
                new Dessert() {Name = "Eclair", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
                new Dessert() {Name = "Cupcake", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
                new Dessert() {Name = "Gingerbread", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
            };

            void SortData(MatSortChangedEvent sort)
            {
                sortedData = desserts.ToArray();
                if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
                {
                    Comparison<Dessert> comparison = null;
                    switch (sort.SortId)
                    {
                        case "name":
                            comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
                            break;
                        case "calories":
                            comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
                            break;
                        case "fat":
                            comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
                            break;
                        case "carbs":
                            comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
                            break;
                        case "protein":
                            comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
                            break;
                    }
                    if (comparison != null)
                    {
                        if (sort.Direction == MatSortDirection.Desc)
                        {
                            Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
                        }
                        else
                        {
                            Array.Sort(sortedData, comparison);
                        }
                    }
                }
            }

            Dessert[] sortedData = null;

            protected override void OnInitialized()
            {
                base.OnInitialized();
                SortData(null);
            }
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""@sortedData"" class=""mat-elevation-z5"" ShowPaging=""false"" UseSortHeaderRow=""true"">
            <MatTableHeader>
                <MatSortHeaderRow SortChanged=""@SortData"">
                    <MatSortHeader SortId=""name""><span style=""width:600px"">Dessert (100g)</span></MatSortHeader>
                    <MatSortHeader SortId=""calories"">Calories</MatSortHeader>
                    <MatSortHeader SortId=""fat"">Fat (g)</MatSortHeader>
                    <MatSortHeader SortId=""carbs"">Carbs (g)</MatSortHeader>
                    <MatSortHeader SortId=""protein"">Protein (g)</MatSortHeader>
                </MatSortHeaderRow>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@context.Calories</td>
                <td>@context.Fat</td>
                <td>@context.Carbs</td>
                <td>@context.Protein</td>
            </MatTableRow>
        </MatTable>

        @code
        {
            class Dessert
            {
                public int Calories { get; set; }
                public int Carbs { get; set; }
                public int Fat { get; set; }
                public string Name { get; set; }
                public int Protein { get; set; }
            }

            Dessert[] desserts = new[]
            {
                new Dessert() {Name = ""Frozen yogurt"", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
                new Dessert() {Name = ""Ice cream sandwich"", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
                new Dessert() {Name = ""Eclair"", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
                new Dessert() {Name = ""Cupcake"", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
                new Dessert() {Name = ""Gingerbread"", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
            };

            void SortData(MatSortChangedEvent sort)
            {
                sortedData = desserts.ToArray();
                if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
                {
                    Comparison<Dessert> comparison = null;
                    switch (sort.SortId)
                    {
                        case ""name"":
                            comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
                            break;
                        case ""calories"":
                            comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
                            break;
                        case ""fat"":
                            comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
                            break;
                        case ""carbs"":
                            comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
                            break;
                        case ""protein"":
                            comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
                            break;
                    }
                    if (comparison != null)
                    {
                        if (sort.Direction == MatSortDirection.Desc)
                        {
                            Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
                        }
                        else
                        {
                            Array.Sort(sortedData, comparison);
                        }
                    }
                }
            }

            Dessert[] sortedData = null;

            protected override void OnInitialized()
            {
                base.OnInitialized();
                SortData(null);
            }
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>



<h5 class="mat-h5">Select row, with returning selected item example</h5>
<DemoContainer>
    <Content>
        <MatTable Items="tasks" class="mat-elevation-z5" AllowSelection="true" SelectionChanged="SelectionChangedEvent">
            <MatTableHeader>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Id</td>
                <td>@context.Name</td>
                <td>@context.Description</td>
            </MatTableRow>
        </MatTable>
        <p>@_currentSelectedTask</p>
        @code
        {
            private string _currentSelectedTask;
            public class Task
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public string Description { get; set; }

                public Task(int id, string name, string description)
                {
                    Id = id;
                    Name = name;
                    Description = description;
                }
            }

            Task[] tasks = new[]
                    {
                new Task(1, "T1", "Do something..."),
                new Task(2, "T2", "Do something..."),
                new Task(3, "T3", "Do something..."),
                new Task(4, "T4", "Do something..."),
                new Task(5, "T5", "Do something..."),
                new Task(6, "T6", "Do something..."),
                new Task(7, "T7", "Do something..."),
            };
            public void SelectionChangedEvent(object row)
            {
                if (row == null)
                {
                    _currentSelectedTask = "";
                }
                else
                {
                    _currentSelectedTask = string.Format("Task Nr. {0} has been selected", ((Task)row).Id);
                }

                this.StateHasChanged();
            }
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""tasks"" class=""mat-elevation-z5"" AllowSelection=""true"" SelectionChanged=""SelectionChangedEvent"">
            <MatTableHeader>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Id</td>
                <td>@context.Name</td>
                <td>@context.Description</td>
            </MatTableRow>
        </MatTable>
        <p>@_currentSelectedTask</p>
        @code
        {
            private string _currentSelectedTask;
            public class Task
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public string Description { get; set; }

                public Task(int id, string name, string description)
                {
                    Id = id;
                    Name = name;
                    Description = description;
                }
            }

            Task[] tasks = new[]
                    {
                new Task(1, ""T1"", ""Do something...""),
                new Task(2, ""T2"", ""Do something...""),
                new Task(3, ""T3"", ""Do something...""),
                new Task(4, ""T4"", ""Do something...""),
                new Task(5, ""T5"", ""Do something...""),
                new Task(6, ""T6"", ""Do something...""),
                new Task(7, ""T7"", ""Do something...""),
            };
            public void SelectionChangedEvent(object row)
            {
                if (row == null)
                {
                    _currentSelectedTask = """";
                }
                else
                {
                    _currentSelectedTask = string.Format(""Task Nr. {0} has been selected"", ((Task)row).Id);
                }

                this.StateHasChanged();
            }
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Select row, with returning selected item example</h5>
<DemoContainer>
    <Content>
        <MatTable Items="people"
                  class="mat-elevation-z5"
                  OnRowDbClick="OnPersonDbClicked"
                  AllowSelection="true">
            <MatTableHeader>
                <th>Id</th>
                <th>Firstname</th>
                <th>Lastname</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Id</td>
                <td>@context.Firstname</td>
                <td>@context.Lastname</td>
            </MatTableRow>
        </MatTable>
        <p>You have double clicked on <b>@_currentSelectedPerson</b></p>
        @code
        {
            private string _currentSelectedPerson = "noone";
            public class Person
            {
                public int Id { get; set; }
                public string Firstname { get; set; }
                public string Lastname { get; set; }

                public Person(int id, string firstname, string lastname)
                {
                    Id = id;
                    Firstname = firstname;
                    Lastname = lastname;
                }
            }

            Person[] people = new[]
                    {
                new Person(1, "Gerda", "Mugwort"),
                new Person(2, "Mattalic", "Burrowes"),
                new Person(3, "Hal", "Smallburrow"),
            };

            void OnPersonDbClicked(object item)
            {
                var person = item as Person;
                if (person == null)
                {
                    _currentSelectedPerson = "noone";
                    return;
                }

                _currentSelectedPerson = $"{person.Firstname} {person.Lastname}";
            }
        }
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""people""
                  class=""mat-elevation-z5""
                  OnRowDbClick=""OnPersonDbClicked""
                  AllowSelection=""true"">
            <MatTableHeader>
                <th>Id</th>
                <th>Firstname</th>
                <th>Lastname</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Id</td>
                <td>@context.Firstname</td>
                <td>@context.Lastname</td>
            </MatTableRow>
        </MatTable>
        <p>You have double clicked on <b>@_currentSelectedPerson</b></p>
        @code
        {
            private string _currentSelectedPerson = ""noone"";
            public class Person
            {
                public int Id { get; set; }
                public string Firstname { get; set; }
                public string Lastname { get; set; }

                public Person(int id, string firstname, string lastname)
                {
                    Id = id;
                    Firstname = firstname;
                    Lastname = lastname;
                }
            }

            Person[] people = new[]
                    {
                new Person(1, ""Gerda"", ""Mugwort""),
                new Person(2, ""Mattalic"", ""Burrowes""),
                new Person(3, ""Hal"", ""Smallburrow""),
            };

            void OnPersonDbClicked(object item)
            {
                var person = item as Person;
                if (person == null)
                {
                    _currentSelectedPerson = ""noone"";
                    return;
                }

                _currentSelectedPerson = $""{person.Firstname} {person.Lastname}"";
            }
        }
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>