Sorting and Filtering

The Spredsheet provides options for sorting and filtering its cells.

To enable sorting and filtering:

  • Use the :filter-ref property—Defines the cells which will be sortable and filterable.
  • Use the :filter-columns property—Enables you to individually configure sorting and filtering for each column.

For more information, refer to the API of the Kendo UI Spreadsheet.

<div id="vueapp" class="vue-app">
    <kendo-spreadsheet ref="spreadsheet">
        <kendo-spreadsheet-sheet :name="'OrdersLog'"
                                 :merged-cells="mergedCells"
                                 :rows="rows"
                                 :columns="columns"
                                 :filter-ref="'A3:G49'"
                                 :filter-columns="[]">
        </kendo-spreadsheet-sheet>
    </kendo-spreadsheet>
</div>
Vue.use(SpreadsheetInstaller);

new Vue({
    el: '#vueapp',
    data: {
        mergedCells: [
            "A1:G1",
            "A2:F2"
        ],
        columns: [
            { width: 80 },
            { width: 100 },
            { width: 100 },
            { width: 150 },
            { width: 150 },
            { width: 130 },
            { width: 130 }
        ],
        rows: [{
            height: 50,
            cells: [
            {
                value: "ORDERS LOG", background: "rgb(144,164,174)", textAlign: "center",
                color: "white", fontSize: 18
            }
            ]
        },
        {
            cells: [
            {
                value: "REPORT", background: "rgb(176,190,197)", color: "white", textAlign: "right"
            },
            {
                format: "MMM-dd", formula: "TODAY()", background: "rgb(176,190,197)", color: "white", index: 6
            }
            ]
        },
        {
            cells: [
            {
                value: "ID", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "DATE", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "TIME", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "CLIENT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "COMPANY", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "SHIPPING", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            },
            {
                value: "DISCOUNT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10223, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 9:30"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Terry Lawson", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0.02, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10247, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 15:15"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Charles Miller", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10251, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 14:13"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Jennie Walker", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.10, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10226, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 17:43"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Samuel Green", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10227, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 10:27"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "James Smith", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.01, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10228, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 11:12"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Nora Allen", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10229, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 13:56"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Robyn Mason", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.07, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10230, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 14:40"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Ralph Burke", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.06, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10231, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 8:25"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Patty Prince", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0.02, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10232, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 10:09"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Natasha Green", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10233, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 12:54"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "James Smith", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.03, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10259, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 11:28"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Francis Stevens", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10235, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 18:22"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Roger Peters", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.03, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10236, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 9:07"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Nora Allen", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.02, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10224, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 12:14"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Scott Lewis", textAlign: "left"
            },
            {
                value: "Circuit Design", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.09, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10225, textAlign: "center"
            },
            {
                value: new Date("6/30/2014"), textAlign: "center"
            },
            {
                value: new Date("6/30/2014 14:58"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Scott Fox", textAlign: "left"
            },
            {
                value: "Zig Zag Coder", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.10, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10239, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 17:20"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Marian Rodriguez", textAlign: "left"
            },
            {
                value: "Zig Zag Coder", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0.06, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10240, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 8:04"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Joe Lawrence", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.07, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10241, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 10:49"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Francis Stevens", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10242, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 13:33"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Lynda Evans", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.05, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10243, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 16:18"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Keith Clark", textAlign: "left"
            },
            {
                value: "Circuit Design", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10244, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 19:02"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Kara Wood", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10245, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 9:46"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Juan Jacobs", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.07, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10237, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 13:51"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Samuel Green", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.15, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10265, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 14:36"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Alison Thompson", textAlign: "left"
            },
            {
                value: "Circuit Design", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.10, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10248, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 18:07"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Jerry Wright", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.07, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10234, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 15:38"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Nora Allen", textAlign: "left"
            },
            {
                value: "Plan Smart", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.10, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10238, textAlign: "center"
            },
            {
                value: new Date("6/29/2014"), textAlign: "center"
            },
            {
                value: new Date("6/29/2014 14:36"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Mark Moore", textAlign: "left"
            },
            {
                value: "Webcom Services", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.09, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10246, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 12:31"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Patty Prince", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10252, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 16:57"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "James Smith", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.02, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10253, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 18:42"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Marian Rodriguez", textAlign: "left"
            },
            {
                value: "Zig Zag Coder", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.01, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10254, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 9:46"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Patty Prince", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10255, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 12:31"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Jack Sims", textAlign: "left"
            },
            {
                value: "Circuit Design", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10256, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 15:15"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Hannah Watson", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.01, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10257, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 18:07"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Gregory Morrison", textAlign: "left"
            },
            {
                value: "Webcom Services", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.04, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10258, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 8:44"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Joe Lawrence", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10249, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 8:44"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Edward Hall", textAlign: "left"
            },
            {
                value: "Zig Zag Coder", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10260, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 14:13"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Glenda White", textAlign: "left"
            },
            {
                value: "Webcom Services", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.05, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10261, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 16:57"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Lynda Evans", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0.01, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10262, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 8:48"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Edward Hall", textAlign: "left"
            },
            {
                value: "Zig Zag Coder", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0.04, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10250, textAlign: "center"
            },
            {
                value: new Date("7/1/2014"), textAlign: "center"
            },
            {
                value: new Date("7/1/2014 11:28"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Jerry Wright", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.08, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10264, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 13:51"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Jerry Wright", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "2 days", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10263, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 9:07"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Charles Miller", textAlign: "left"
            },
            {
                value: "Complete Tech", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.10, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10266, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 17:20"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Alison Ross", textAlign: "left"
            },
            {
                value: "Excella", textAlign: "left"
            },
            {
                value: "express", textAlign: "center"
            },
            {
                value: 0.02, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10267, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 8:04"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Alexandra Kennedy", textAlign: "left"
            },
            {
                value: "Webcom Services", textAlign: "left"
            },
            {
                value: "regular", textAlign: "center"
            },
            {
                value: 0.05, format: "0%", textAlign: "center"
            }
            ]
        },
        {
            cells: [
            {
                value: 10268, textAlign: "center"
            },
            {
                value: new Date("7/2/2014"), textAlign: "center"
            },
            {
                value: new Date("7/2/2014 10:49"), format: "hh:mm", textAlign: "center"
            },
            {
                value: "Agnes Hill", textAlign: "left"
            },
            {
                value: "Integra Design", textAlign: "left"
            },
            {
                value: "1 day", textAlign: "center"
            },
            {
                value: 0, format: "0%", textAlign: "center"
            }
            ]
        }]
    },
    mounted () {
        var spreadsheet = this.$refs.spreadsheet.kendoWidget();
        spreadsheet.element.css('height', '450px');
        spreadsheet.element.css('width', '100%');
        spreadsheet.resize();
    }
})

In this article