###Have you ever needed to create a simple HTML table, to show your tests status?
We all know the next problem: We have tests running, and we want to show them in a table.
the problems:
- not all tests ran in the same dates
- the number of the dates is ever changing
This directive is plain simple, just call it with the data, and get the right table HTML
this directive hasn't any css properties, its pure
<table>, <th>, <td>, <tr>so you can customize it as you wish.
The directive will parse your data as long as its in the following format: { rowName: [ {name:"", result:""}, {name:"", result:""}, {name:"", result:""}, {name:"", result:""}, ... ], ... }
rowNameis the first col of each row{name:"", result:""}is a col wherenameis the test's nameresultis the test's result
For the following object:
{
Fedora: [
{name: "dec10", result: "Fail"},
{name: "dec1", result: "Pass"},
{name: "dec2", result: "Pass"},
{name: "dec3", result: "Pass"},
{name: "dec4", result: "Pass"},
{name: "dec5", result: "Pass"},
{name: "dec6", result: "Pass"},
{name: "dec7", result: "Pass"},
{name: "dec8", result: "Pass"}],
Windows: [
{name: "dec2", result: "Pass"},
{name: "dec4", result: "Pass"},
{name: "dec14", result: "Fail"},
{name: "dec6", result: "Pass"},
{name: "dec8",result: "Pass"}],
Ubuntu: [
{name: "dec2", result: "Pass"},
{name: "dec4",result: "Pass"},
{name: "dec6",result: "Pass"},
{name: "dec8",result: "Pass"},
{name: "dec16",result: "Fail"}],
Mac: [
{name: "dec1",result: "Pass"},
{name: "dec2",result: "Pass"},
{name: "dec3",result: "Pass"},
{name: "dec4",result: "Pass"},
{name: "dec5",result: "Pass"},
{name: "dec6",result: "Pass"},
{name: "dec7",result: "Pass"},
{name: "dec8", result: "Pass"},
{name: "dec9", result: "Pass"},
{name: "dec10", result: "Pass"},
{name: "dec11", result: "Pass"},
{name: "dec12", result: "Pass"},
{name: "dec13", result: "Pass"},
{name: "dec14", result: "Pass"},
{name: "dec15", result: "Pass"},
{name: "dec16", result: "Pass"}]
}- Download
tests-table.js - Add
<script>to youre HTML, referrencingtests-table.js - In you Angular module, add
TestsTabledependency. - In you HTML, just call
<full-table main-col-name="name" table-data="tableData"></full-table>where main-col-name is the first column's name
and table-data is the data to fill the table with.