After grouping of data table , Each column header does not show in right position where the column value is showed . RRS feed

  • Question

  • User-1355965324 posted

    I am using js data table to show the employee attendance report . But after grouping of data [ Branch and Employee ] , the headers not showing the right position  where the column value is showing. Please can you help. I have  given the link for the code. I am looking for the help with suggested code to  show the detail line column header and its value on the same position of the column. The value of Date column  , Clocked In , Clocked Out column should be showed against its heading and so on..

    When the value in  column 'Remark'  is became large', then all the alignment will  go wrong in rest of the column. Please can you advise me how can I fix

    Any help with code would be very appreciated

    <head onload="return disableBack()">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <title>MY COMPANY</title>
        <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
        <!-- Custom styles for this template -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
        <!--For Attendance Report-->
        <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css">
        <style rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></style>
            tr.odd td:first-child,
            tr.even td:first-child {
                padding-left: 4em;
            td {
                border: 1px black;
                text-align: center;
                font: smaller;
            td {
                white-space: nowrap;
            td.wrapok {
                white-space: normal
            .td-left {
                text-align: left;
    <div class="table-responsive">
                            <div class="col-sm-12 portlet light @ViewBag.IsReport" id="divReport">
                                <table id="example" class="display text-nowrap"  cellspacing="0" style="width:100%">
                                    <thead class="thead-light">
                                                Depot Name
                                                Employee Name
                                                Clocked In
                                                Clocked Out
                                                Day Off
                                                Time Off
                                                Time Off Hrs
                                                Extra Hrs
                                        @foreach (AttendanceLogModel log in ViewBag.AttendanceLogs as List<AttendanceLogModel>)
                                                <td> @log.DepotName</td>
                                                <td> @log.EmployeeName</td>
                                                <td> @log.FromDate</td>
                                                <td> @log.ClockedIn</td>
                                                <td> @log.ClockedOut</td>
                                                <td> @Convert.ToInt32(@log.IsNormalAttendance)</td>
                                                <td> @Convert.ToInt32(@log.IsDayOffMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsSickMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsHolidayMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsMaternityLeave)</td>
                                                <td> @Convert.ToInt32(@log.IsTimeOff)</td>
                                                <td> @log.TimeOffHrs</td>
                                                <td> @log.Hrs</td>
                                                <td> @Convert.ToInt32(@log.ExtraTimeHrs)</td>
                                                <td> @log.Remark</td>
        $(document).ready(function () {
                order: [[0, 'asc'], [1, 'asc']],
                rowGroup: {
                    dataSrc: [0, 1],
                    startRender: function (rows, group) {
                        return $('<tr/>')
                            .append('<td class="td-left" >' + group + '</td>');
                scrollY: "500px",
                scrollX: true,
                paging: false,
                columnDefs: [{
                    targets: [0, 1],
                    visible: false

    The html code link I have given as below


    Saturday, March 23, 2019 4:12 PM

All replies

  • User-943250815 posted

    On fiddle link provided, you can see right on First Column a misalignment, also if you write a long string on Remark column is writes over ExtraHrs columns.
    Also there a wrong use of table, just to show a fake Group.

    1) Header you see (fake) is there just to not scroll as table rows
    2) Real Header of table #example is hidden using Height: 0px in all elements, but each column has a width set
    3) All rows follow Header width.

    IMHO, a useless code

    Datatables has many samples https://datatables.net/examples/advanced_init/row_grouping.html

    Sunday, March 24, 2019 3:35 PM