Is it possible to make certain columns narrower than the others

andras2 · July 2022

Hi there,

I had a look at the column option on the website but I could not find the answer.

I would like to make certain column extra narrow such as the one for selection-checkbox (and a short for serial number).

I had a look at this;
https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fixed

but, I do not need column to be fixed.

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren · July 2022

Using columns.width is used to set the column's width. Its not always that simple and there maybe other things that you need to to to make it work. PLease post a link to your page or a test case replicating the issue so we can offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

andras2 · July 2022

Hi there,

Thank you. I tried but it did not work; My site is actually an Electron like app with Eel and Python; Here is the full source code; The upper part is about the Javascripts (including DataTable) and the bottom part is simple HTML.

<!DOCTYPE HTML>

<html>
<head>
<link   rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<link rel="stylesheet" type="text/css" href="/Bootstrap/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="/JQuery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<link rel="stylesheet" href="/Font Avesome/fontawesome-free-6.1.1-web/css/all.min.css">
<link rel="stylesheet" type="text/css" href="/CSS/style.css">
<script src="eel.js"></script>

<script>    
    $(document).ready(function() {  
        var table = $('#example').DataTable( {
            // "columnDefs": [
            // { "width": "10%", "targets": 0 },
            // { "width": "10%", "targets": 1 },
            // { "width": "10%", "targets": 2 },
            // { "width": "10%", "targets": 3 },
            // { "width": "10%", "targets": 4 },
            // { "width": "10%", "targets": 5 },
            // { "width": "30%", "targets": 6 }
            // ],
            "columns": [
            { "width": "10%" },
            { "width": "10%" },
            { "width": "10%" },
            { "width": "10%" },
            { "width": "10%" },
            { "width": "10%" },
            { "width": "40%" }
            ],
            // Select
                select: true,
                stateSave: false,
                rowId: 'serial_ids',
                columnDefs: [ {
                    orderable: false,
                    className: 'select-checkbox',
                    targets:   0
                } ],
                select: {
                    style:    'os',
                    selector: 'td:first-child'
                },
            // Table
            "ajax": "data_serials.txt",
            "columns": [
                { "data": "serial_ids"},
                { "data": "select" },    
                { "data": "serial_num" },
                { "data": "name" },
                { "data": "email" },
                { "data": "date" },
                { "data": "notes" }
            ]            
        }); 
        // ///// Hide column
        table.column( 6 ).visible( false );
        //// Click on row
        $('#example tbody').on('click', 'tr', function () {
        var table = $('#example').DataTable();
        var data = table.row( this ).data();
        $("input#s_number").val(data.serial_num);
        $("input#s_name").val(data.name);
        $("input#s_email").val(data.email);
        $("input#s_date").val(data.date);
        $("textarea#s_notes").val(data.notes);
        //
        var issue_id = document.getElementById('div_s_record_id');
        issue_id.innerHTML = data.serial_ids;    
        });
        /// AJAX refresh
        setInterval( function () {
            var rows = table.rows({selected: true});
            table.ajax.reload( 
                function () {rows.select()}, false );}, 
                1000 ); 
        });

</script>

<script>
    function db_serial_add_new(){
        eel.db_serial_add_new_py()();
    }
    function db_serial_del_record(){
        table = $('#example').DataTable(); 
        var ids = table.rows( { selected: true } ).ids().toArray();
        console.log(ids)
        eel.db_serial_del_record_py(ids)();
    }
    function db_serial_update_record() {
        table = $('#example').DataTable(); 
        var serial_number = document.getElementById('s_number').value;
        var serial_name   = document.getElementById('s_name').value;
        var serial_email  = document.getElementById('s_email').value;
        var serial_date   = document.getElementById('s_date').value;
        var serial_notes  = document.getElementById("s_notes").value;
        serial_notes      = serial_notes.replaceAll("\n", "\\n");
        var serial_id  = document.getElementById("div_s_record_id").textContent;
        //console.log(serial_id,serial_number,serial_name,serial_email,serial_date,serial_notes)
        eel.db_serial_update_record_py(serial_id,serial_number,serial_name,serial_email,serial_date,serial_notes);
        }
    function generate_serial(){
        eel.generate_serial_py()(function(serial_num){
            var serial = document.getElementById("s_gen");
            serial.value = serial_num
        });
    }
</script>
<!--Navigation bar -->
<div id="nav-placeholder"></div>
<script>
$(function(){
  $("#nav-placeholder").load("navigation.html");
});
</script>
<!--end of Navigation bar -->

<style>
    .control-title {font-weight: bold;} 
    .navbar .navbar-nav #menu-item1 .nav-link  {color:rgb(0, 0, 0);}
</style>

</head>
<body>
    <button type="button" class="button" onclick="db_serial_add_new()"><i class="fas fa-plus-circle" style="margin-right:5px"></i>Add</button>
    <button type="button" class="button" id="delBtn" onclick="db_serial_del_record()"><i class="fas fa-minus-circle" style="margin-right:5px"></i>Delete</button>
    <button type="button" class="button" value="Download" onclick="exportSelected()"><i class="fas fa-file-export" style="margin-right:5px"></i>Export</button>
    <button type="button" class="button" onclick="importTask()"><i class="fas fa-file-import" style="margin-right:5px"></i>Import</button>
    <hr>
    <form>
        <div class="row">
            <!-- <div class="container1"> -->
                <div class="col-sm-9 px-4">  
                    <table id="example" class="display" style="width:100%">             
                        <thead>
                            <tr>
                                <th>Column</th>
                                <th>No.</th>
                                <th>Serial</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Date</th>
                                <th>Notes</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            <!-- </div>  -->         
            <!-- <div class="container2"> -->
                <!-- <div class="col-sm-4"> -->
                    <!-- Controls -->
                    <div class="col-lg-3" id="control">
                        <form>
                        <div class="control-title">Serial:</div>
                        <input type="text" id="s_number" name="comments" cols="50" rows="1" onkeyup=db_serial_update_record()></input><br>
                        <br>
                        <div class="control-title">Name:</div>
                        <input type="text" id="s_name" name="comments" cols="50" rows="1" onkeyup=db_serial_update_record()></input><br>
                        <br>
                        <div class="control-title">Email:</div>
                        <input type="text" id="s_email" name="comments" cols="50" rows="1" onkeyup=db_serial_update_record()></input><br>
                        <br>
                        <div class="control-title">Date:</div>
                        <input type="text" id="s_date" name="comments" cols="50" rows="1" onkeyup=db_serial_update_record()></input><br>
                        <br>
                        <div class="control-title">Notes:</div>
                        <textarea id="s_notes" name="comments" cols="50" rows="5" onkeyup=db_serial_update_record() style="overflow:auto;resize:none"></textarea>
                        </form>
                        <div class="control-title">Generate Serial Number:</div>
                        <!-- Generate Serial Number -->
                        <input type="text" id="s_gen" name="comments" cols="50" rows="1" onkeyup=db_serial_update_record()></input><br>
                        <button type="button" class="button" onclick="generate_serial()">Generate Serial Number</button>

                </div>    
            <!-- </div> -->
        </div>
        <footer>
            <div style="display: inline-block;" >Selected Record ID:</div>
            <div id="div_s_record_id" style="display: inline-block;"></div>
        </footer>
</body>
</html>

kthorngren · July 2022

There is nothing obvious in the code. I wonder if you can take the generated web page and build a test case from that?

The problem could be the size of the header or the size of the data in the columns which don't allow for making the column smaller. There could be a CSS setting overriding the column size. Maybe this thread will give some ideas. You might find other threads on the forum with helpful tips.

Kevin

andras2 · July 2022

Hi Kavein,

I managed to find the solution; columnDefs had been defined twice. I reorganized the code with the line below and now it works as expected;

 { "orderable": false, "className": 'select-checkbox',"targets": 0}

            "columnDefs": [
            { "width": "5%", "targets": 0 },
            { "width": "5%", "targets": 1 },
            { "width": "30%", "targets": 2 },
            { "width": "10%", "targets": 3 },
            { "width": "10%", "targets": 4 },
            { "width": "10%", "targets": 5 },
            { "width": "30%", "targets": 6 },
            { "orderable": false, "className": 'select-checkbox',"targets": 0}    
        ],
            // Select
                select: true,
                stateSave: false,
                rowId: 'serial_ids',
                select: {
                    style:    'os',
                    selector: 'td:first-child'
                },

Is it possible to make certain columns narrower than the others

Is it possible to make certain columns narrower than the others

Answers

Howdy, Stranger!

Categories

DataTables

Is it possible to make certain columns narrower than the others

Is it possible to make certain columns narrower than the others

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables