Base solution for your next web application
Open Closed

Change row height for datatable to get a compact layout #6032


User avatar
0
cschroeder created

Hi there,

i created a datatable via the .mDatatable function. The options i am using:

  var dtoptions = {
            data: {
                type: 'local',
                source: viewData,
                pageSize: 20,
                saveState: {
                    cookie: true,
                    webstorage: true
                },
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false,
                autoColumns: false
            },
            layout: {
                theme: 'default',
                class: 'm-datatable--brand',
                height: 400,
                footer: false,
                scroll: true,
                header: true,

                smoothScroll: {
                    scrollbarShown: true
                },
                spinner: {
                    overlayColor: '#000000',
                    opacity: 0,
                    type: 'loader',
                    state: 'brand',
                    message: true
                },
                icons: {
                    sort: { asc: 'la la-arrow-up', desc: 'la la-arrow-down' },
                    pagination: {
                        next: 'la la-angle-right',
                        prev: 'la la-angle-left',
                        first: 'la la-angle-double-left',
                        last: 'la la-angle-double-right',
                        more: 'la la-ellipsis-h'
                    }
                }
            },
            sortable: true,
            pagination: true,
            search: {
                // enable trigger search by keyup enter
                onEnter: false,
                // input text for search
                input: $('#generalSearch'),
                // search delay in milliseconds
                delay: 400,
            },
            rows: {
                callback: function(row, data, index) {
                    row.cells[0].innerText = moment(data.x).format('DD.MM.YYYY HH:mm');
                },
                // auto hide columns, if rows overflow. work on non locked columns
                autoHide: false
            },
            // columns definition
            columns: [
                {
                    field: 'x',
                    title: "Zeitstempel",
                    type: 'datetime',
                    format: 'LLLL',
                    sortable: true,
                    filterable: false,
                    width: 150

                },
                {
                    field: 'y',
                    title: "Vorschub in kWh",
                    sortable: false,
                    filterable: false,
                    width: 150
                }
            ],
            toolbar: {
                layout: ['pagination', 'info'],
                placement: ['bottom'], //'top', 'bottom'
                items: {
                    pagination: {
                        type: 'default',
                        pages: {
                            desktop: {
                                layout: 'compact',
                                pagesNumber: 5
                            },
                            tablet: {
                                layout: 'default',
                                pagesNumber: 3
                            },
                            mobile: {
                                layout: 'compact'
                            }
                        },
                        navigation: {
                            prev: true,
                            next: true,
                            first: true,
                            last: true
                        },
                        pageSizeSelect: [20, 30, 50, 100, 200]
                    },
                    info: true
                }
            },
            translate: {
                records: {
                    processing: 'Bitte warten...',
                    noRecords: 'Keine Einträge gefunden!'
                },
                toolbar: {
                    pagination: {
                        items: {
                            default: {
                                first: 'Erste Seite',
                                prev: 'Vorherige Seite',
                                next: 'Nächste Seite',
                                last: 'Letzte Seite',
                                more: 'Mehr Seiten',
                                input: 'Seitennummer',
                                select: 'Einträge pro Seite'
                            },
                            info: 'Zeige {{start}} - {{end}} von {{total}} Einträgen'
                        }
                    }
                }
            }
        }

I tried to change the height of the rows in the 'rows' area of the options to get a compact layout for the datatable but nothing changed. How can i adjust the row height?


1 Answer(s)