tableeditor's Introduction

Umbraco 7 TableEditor

Table editor is a simple table... editor... :)

Features:

Use your own markup.
Editor adds/removes rows/cols.
Set limit on rows/cols.
Add table, row and column styles.
Denote a header, footer row (first or last).

###Install Presently it's a manual install:

Create a ~/App_Plugins/TableEditor folder.
Drop the /css, /js, /views and package.manifest into your ~/App_Plugins/TableEditor folder.
Drop the dll in /bin
Touch web.config
Configure in Developer->Datatypes

###Sample Partial Call @Html.Partial("~/pathtopartial/partialname.cshtml", Model.Content.GetPropertyValue<TableEditorModel>("propname"))

###Sample Partial Template You can use the sample template below or customize your own.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<TableEditorModel>
@{
    var rowIndex = 0;
}
<div class="table-editor-wrapper">
    <table class="@Model.TableStyle">
        @{       
            if(Model.UseFirstRowAsHeader) {
                <thead>
                    @foreach (var column in Model.Cells.FirstOrDefault())
                    {
                        <th>@Html.Raw(column.Value)</th>
                    }
                </thead>   
                rowIndex++;
            }
        
            <tbody>
                @foreach (var row in Model.Cells)
                {
                    if(Model.UseFirstRowAsHeader && row == Model.Cells.FirstOrDefault()) {
                        continue;
                    }

                    if (Model.UseLastRowAsFooter && row == Model.Cells.LastOrDefault() && Model.Cells.Count() > 1)
                    {
                        continue;
                    }
        
                    <tr class="@Model.RowStylesSelected.ElementAtOrDefault(rowIndex)">
                        @{
                            var columnIndex = 0;
                        
                            foreach (var column in row)
                            {
                                <td class="@Model.ColumnStylesSelected.ElementAtOrDefault(columnIndex)">@Html.Raw(column.Value)</td>
                                columnIndex++;
                            }
                        
                            rowIndex++;
                        }
                    </tr>
                }
            </tbody>

            if (Model.UseLastRowAsFooter && Model.Cells.Count() > 1)
            {
                var columnIndex = 0;
                <tfoot>
                    @foreach (var column in Model.Cells.LastOrDefault())
                    {
                        <td class="@Model.ColumnStylesSelected.ElementAtOrDefault(columnIndex)">@Html.Raw(column.Value)</td>
                        columnIndex++;
                    }
                </tfoot>  
            }
        }
    </table>
</div>

Recommend Projects