CODEWITHSUNDEEP
twitter-bootstrapgistabulator
Justin Kirtz
Justin Kirtz

Reputation: 11

Tabulator Table Format in Bootstrap Card That Is Initially Collapsed

I've created a Tabulator table that is housed inside of a standard Bootstrap collapsible card to be used in an online GIS statisitics application. The user can draw any geometry shape on the map to select and query GIS data and the query will return any relevant groundwater information that is then displayed in the tabulator table. The table is in the card body and when the user clicks on the card header the table can be hidden/shown.

This is what my table looks like right now, without the card being collapsed by default, properly formatted: https://i.sstatic.net/a1OFI.png

Right now the card is open by default, so the table displays just fine and all of the columns are formatted properly. I'd like to have the card collapsed by default for better app performance, and then once the user clicks on the card header to expand the card, have the tabulator table properly formatted.

I know that the tabulator table needs to be visible in order to get the table to render correctly, and I know that you can redraw a table with the tabulatorTable.redraw(true) method. I have the redraw method in a function that is called when the user clicks on the card header, however, the user must click on the header twice to get the properly formatted table.

First, the application is loaded with a collapsed card. https://i.sstatic.net/aWBOU.png

After the user completes the query and clicks the header for the first time to expand the card, the table is all garbled:

https://i.sstatic.net/uih6v.png

Then, click the header again to re-collapse the card:

https://i.sstatic.net/7lKol.png

Finally, click the header for the second time and you get the (mostly) properly formatted table due to the onclick event firing the redraw method:

https://i.sstatic.net/eXxg0.png

So, my questions are:

Is there a way to get the redraw method to work the first time that the user clicks on the card header so they don't have to click it twice to get the properly formatted table? Also, if you compare the first image of the properly formatted table to the last image of the mostly properly formatted table you'll notice that some of the columns are off slightly. Is there a way to fix that as well?

Here is a pastebin of my tabulator code: https://pastebin.com/6S806iHw

var tabulatorCardHeader = document.getElementById('headingTable');

tabulatorCardHeader.onclick = function() {    
    app.statisticsTable.redraw(true);
}
//define attribute table
app.statisticsTable = new Tabulator("#synterra-stats-table", { // UPDATE WHEN DEPLOYING
    data: tabledata,
    height: 450,
    layout: "fitDataFill",
    selectable: 1,
    placeholder: "No Features Available In Specified Area",
    pagination: "local",
    paginationSize: 20,
    groupBy: '',
    groupClosedShowCalcs: true,
    columnCalcs: 'both',
    downloadConfig: {
        columnGroups: true,
        rowGroups: true, //include row groups in download
        columnCalcs: true, //include column calculation rows in download
    },
    paginationSizeSelector: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    rowClick: function(e, row) {
        // WHEN ROW IS CLICKED, ZOOM TO SELECTED FEATURE
        app.activeView.whenLayerView(app.layerToBeQueried).then(function(layerView) {

            var query = app.layerToBeQueried.createQuery();
            query.where = "StationShortName = " + "'" + row._row.data.StationShortName + "'";
            query.outSpatialReference = app.activeView.spatialReference;
            query.returnGeometry = true;

            app.layerToBeQueried.queryFeatures(query).then(function(results) {
                var selectedFeature = results.features[0];

                app.activeView.goTo({
                    target: selectedFeature.geometry,
                    zoom: 20
                });
            });
        });
    },
    rowMouseOver: function(e, row) {
        // highlight selected feature when row is hovered
        app.activeView.whenLayerView(app.layerToBeQueried).then(function(layerView) {

            var query = app.layerToBeQueried.createQuery();
            query.where = "StationShortName = " + "'" + row._row.data.StationShortName + "'";
            query.outSpatialReference = app.activeView.spatialReference;
            query.returnGeometry = true;

            layerView.queryFeatures(query).then(function(results) {
                var graphic = results.features[0];
                app.activeView.graphics.removeAll();
                app.selectedTableFeature.geometry = graphic.geometry;
                app.activeView.graphics.add(app.selectedTableFeature);
            });
        });
    },
    rowMouseLeave: function(e, row) {
        // remove highlight box graphic when user stops hovering over table row
        app.activeView.graphics.removeAll();
    },
    initialSort: [{
            column: "StationShortName",
            dir: "asc"
        }, //sort by this first
        // { column: "SAMPLETYPE", dir: "asc" }, //then sort by this second
    ],
    columns: [ I'VE REMOVED THE COLUMNS FROM HERE DUE TO POST LENGTH ISSUES...SEE PASTEBIN FILE FOR COMPLETE CODE

                    ]
                }

            ]
        }
    ]
});

Thanks,

-Justin

P.S. TABULATOR IS AWESOME, THANK YOU SO MUCH!

Upvotes: 0

Views: 606

Answers (1)

Justin Kirtz
Justin Kirtz

Reputation: 11

After messing around with this for a few days I finally figured it out. If you delay the redraw function until after the bootstrap 'collapse' event 'show.bs.collapse' is fired it will work. This is the function I added:

<script>
            $(document).ready(function () {
                $('#collapseTable').on('show.bs.collapse', function () {
                    app.statisticsTable.redraw(true);
                })
            })
</script>

Upvotes: 1

Related Questions