<table class="itemtable">
    <thead>
        <tr>
            <th id="titletd">
                <div class="material-input">

                    <input class="unitsearch" required>

                    <label>Unit</label>
                    <i class="icon icon-search"></i>
                    <error>You cant do that</error>

                </div>
                <div class="sort-arrows">
                    <div class="arrow-up active"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th id="actiontd" class="noinput">Action</th>
            <th>


                <div class="material-input">

                    <input required>

                    <label>Active power (Sum)</label>
                    <i class="icon icon-filter disabled"></i>

                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th class="noinput">

                <a href="javascript:void(0);" class="dropdown-toggle filterdrop" data-toggle="dropdown" role="button">

                    <i class="icon icon-filter disabled"></i> Status</a>

                <div class="dropdown-menu  dropdown-menu">
                    <table class="statusfilter">
                        <tr>
                            <td>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox"
                                        value="value1">
                                    <label for="styled-checkbox-161"></label>
                                </div>
                            </td>
                            <td>
                                <span class="icon-stack">
                                    <i class="icon-cirk_bg"></i>
                                    <i class="icon-ok-circle color-ok"></i>
                                </span>
                                <span>Alarms</span>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox"
                                        value="value1">
                                    <label for="styled-checkbox-161"></label>
                                </div>
                            </td>
                            <td>
                                <span class="icon-stack">
                                    <i class="icon-tri_bg"></i>
                                    <i class="icon-alert color-alert"></i>
                                </span>
                                <span>Alarms</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-162" type="checkbox"
                                        value="value1">
                                    <label for="styled-checkbox-162"></label>
                                </div>
                            </td>
                            <td>
                                <span class="icon-stack">
                                    <i class="icon-tri_bg"></i>
                                    <i class="icon-warning color-warning"></i>
                                </span>
                                <span>Warnings</span>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-163" type="checkbox"
                                        value="value1">
                                    <label for="styled-checkbox-163"></label>
                                </div>
                            </td>
                            <td>
                                <span class="icon-stack">
                                    <i class="icon-service color-service"></i></span>
                                <span>Service</span></td>
                        </tr>

                        <tr>
                            <td>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-164" type="checkbox"
                                        value="value1">
                                    <label for="styled-checkbox-164"></label>
                                </div>
                            </td>
                            <td><span class="icon-stack">
                                    <i class="icon-radio color-comm"></i></span>
                                <span>Communication</span></td>
                        </tr>



                        <tr>
                            <td colspan="2">
                                <button class="btn">OK</button>
                            </td>
                        </tr>

                    </table>


                </div>


                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>

      
            <th>


                <div class="material-input">

                    <input required>

                    <label>Rective power (Sum)</label>
                    <i class="icon icon-filter disabled"></i>

                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th>

                <div class="material-input">

                    <input required>

                    <label>Apparent power (Sum)</label>
                    <i class="icon icon-filter disabled"></i>
                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th>

                <div class="material-input">

                    <input required>

                    <label>Voltage (Average)</label>
                    <i class="icon icon-filter disabled"></i>
                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>




            <th>

                <div class="material-input">

                    <input required>

                    <label>Frequency (Average)</label>
                    <i class="icon icon-filter disabled"></i>

                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>

            <th>

                <div class="material-input">

                    <input required>

                    <label>Power factor (Average)</label>
                    <i class="icon icon-filter disabled"></i>

                </div>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
  

        </tr>
    </thead>
    <tbody>
        <tr class="datarow">
            <td>
                <i class="uniticon icon icon-gridmeter"></i>
                <a href="#">GM 01</a>
            </td>
            <td>

                <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip"
                    data-original-title="Historical data"></i>
                <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <div class="dropdown-menu">
                        <p class="drillmenuheader">TB01</p>
                        <i class="icon icon-details detailbtn"> Unit Details</i>
                        <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                        <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                        <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                        <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                        <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                        <div class="dropdown-divider"></div>
                        <i class="icon icon-start detailbtn">
                            <span class="disabled">Start Unit</span>
                        </i>
                        <i class="icon icon-stop detailbtn">
                            <span>Stop Unit</span>
                        </i>
                        <i class="icon icon-reset detailbtn"> Reset Unit</i>
                        <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                        <i class="icon icon-createticket"> Create Ticket</i>


                        <i class="icon icon-setpoint"> Setpoint <span>(1500 kW)</span> <img
                                src="/app/core/images/loader_small.gif">


                        </i>
                        <div class="setpoint" style="display:block; padding: 10px 15px; margin: 0px;">
                            <div class="material-input"><input type="text" placeholder="1500"></div>
                            <span>kW</span><button class="btn">Set</button>
                        </div>

                        </a>
                    </div>
                </i>
            </td>
            <td class="bar">
                <div class="barbg">
                    <div class="bardisplay bg-orange" style="width:15%;"></div>
                    <div class="barvalue">499 kW</div>
                </div>

            </td>
            <td class="text-center">
                <span class="icon-stack">
                    <i class="icon-cirk_bg"></i>
                    <i class="icon-ok-circle color-ok"></i>
                </span>
            </td>

    
            <td class="bar">
                <div class="barbg">
                    <div class="bardisplay bg-orange" style="width:15%;"></div>
                    <div class="barvalue">-121 kVAr</div>
                </div>

            </td>
          

            <td class="bar">
                <div class="barbg">
                    <div class="bardisplay bg-orange" style="width:75%;"></div>
                    <div class="barvalue">499 kW</div>
                </div>
            </td>

            <td class="bar">
                <div class="barbg">
                    <div class="bardisplay bg-orange" style="width:12%;"></div>
                    <div class="barvalue">685 V</div>
                </div>
            </td>
            <td class="text-center">50Hz
            </td>
            <td class="bar">
                <div class="barbg">
                    <div class="bardisplay bg-neutral" style="width:50%;"></div>
                    <div class="barvalue">1020 hPa</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>