Responsive table

[geotheory]

Nice tool. Any plans to make this responsive?

[derekeder]

@geotheory It's built with Bootstrap, so it already is responsive.

Tables are tricky on mobile, though. Too many columns and things start side scrolling:

I've dealt with this in the past by using Bootstrap's responsive classes and hiding certain things on mobile using hidden-xs and hidden-sm.

This could be supported here by defining a list of individual column configuration settings (goes along with #2)

[Kinzowa]

Unfortunnatly passing dataTable responsive options doesn't work :-(

CsvToHtmlTable.init({
    csv_path: '/xxx/csv/zzz.csv', 
    element: 'aaa-table-container', 
    allow_download: false,
    csv_options: {separator: ',', delimiter: '"'},
    datatables_options: {

    "rowReorder": {selector: 'td:nth-child(2)'},
    "responsive": true,
    "paging": false, 
    "ordering": true, 
    "searching": false, 
    "info": false, 
    "autoWidth": true

    }
});

With some additional JS and CSS :

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.1.2/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>

[derekeder]

In order to pass in options to DataTables, you must add them to the datatables_options object like so:

        CsvToHtmlTable.init({
            csv_path: "data/Health Clinics in Chicago.csv",
            element: "table-container",
            allow_download: true,
            csv_options: {
                separator: ",",
                delimiter: '"'
            },
            datatables_options: {
                paging: false,
                responsive: true
            },
            custom_formatting: [
                [4, format_link]
            ]
        });