Distributed fiber optic sensors: panel multi app with flask

Showcase
6

Yes, it is the datatable example slightly modified as shown below. As can be seen below, the table is completely responsive in width, hiding or showing the columns according to the width of the div container.

import panel as pn
from bokeh.sampledata.autompg import autompg

raw_css = """ div.dataTables_wrapper {
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                } 


     """ 

css = ['https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css',
        'https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css',
      'https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css']

js = {
    '$': 'https://code.jquery.com/jquery-3.5.1.js',
    'DataTable': 'https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js',
    'respo1': 'https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js',
    'respo2': 'https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js'
}

pn.extension(css_files=css, js_files=js, raw_css=[raw_css])

pn.config.sizing_mode = 'stretch_width'


script = """
<script>
if (document.readyState === "complete") {
var table = $('#example').DataTable( {
            "responsive": true,
            "scrollCollapse": true,
            "paging":         true,
            "columnDefs": [{"className": "dt-left", "targets": "_all"}]
        });


} """

html = autompg.to_html().replace("""class="dataframe\"""",
            """ id="example" class="display nowrap" style="width:100%" """)

d = pn.pane.HTML(html+script, sizing_mode='stretch_width')
d.show()

and it works like this

hiding_columns

1 Like