README.md

Features

• Easy to render table with strong typed

Render Example

    // model
    public class Book
    {
        public int Id { get; set; }

        [Display(Name = "Book Name")]
        public string Name { get; set; }

        [Display(Name = "Create Time")]
        public DateTime CreatedAt { get; set; }
    }

     @*razor view*@
    <div class="text-center">
        @{
            
            var table = MyGrid.NewGrid(Model)
                .Id("my-table")
                .HtmlAttributes(new
                {
                    width = "400px;"
                })
                .TheadAttributes(new
                {
                    style = "width:100px"
                })
                .TrAttributes(new { 
                    style ="opacity:0.75;"
                })
                .DefineColumns((builder) =>
                {
                    // exmaple for get the display name default to property name
                    builder.ColumnFor(m => m.Id)
                        .ThAttributes(new { style = "font-size:50px;" })
                        .TdAttributes(new { style = "font-size:30px;" });

                    // exmaple for get the display name as header title
                    builder.ColumnFor(m => m.Name)
                        .TdAttributes(new { style = "color:red;" });

                    // exmaple for apply a formatter
                    builder.ColumnFor(m => m.CreatedAt).Format(MyFormatter.DateTime);

                    // exmaple for customized cell contents
                    builder.ColumnFor(
                            "Operation",
                            (td, m) =>
                            {
                                var btn = new TagBuilder("button");
                                btn.InnerHtml.Append("Edit");

                                td.InnerHtml.AppendHtml(btn);
                            }
                        );
                })
                .Render();

        }
        
        @*output*@
        @Html.Raw(table)
    </div> 

    
    // signature for Grid Format method
    public static class MyFormatter
    {
        public static string DateTime<T>(object value, T model)
        {
            return ((DateTime)value).ToString("yyyy-MM-dd HH:mm:ss");
        }
    }

Generated Html

<table class="" id="my-table" width="400px;">
    <thead style="width: 100px;">
        <tr>
            <th style="font-size: 50px;">Id</th>
            <th>Book Name</th>
            <th>Create Time</th>
            <th>Operation</th>
        </tr>
    </thead>
    <tbody>
        <tr style="opacity: 0.75;">
            <td style="font-size: 30px;">1</td>
            <td style="color: red;">Advanced C# Programing</td>
            <td>2019-01-02 00:00:00</td>
            <td><button>Edit</button></td>
        </tr>
        <tr style="opacity: 0.75;">
            <td style="font-size: 30px;">1</td>
            <td style="color: red;">Javascript Programing</td>
            <td>2019-07-31 00:00:00</td>
            <td><button>Edit</button></td>
        </tr>
    </tbody>
</table>