SearchPanes: Single panel with its values arranged in multiple columns

abanet

I have a single SearchPane in DataTables that contains 30 values. This pane spans the full width of the web page, resulting in a significant amount of white space between each value and its occurrence count. To access the values at the bottom of the list, extensive scrolling is required. Therefore, it would be beneficial to display these values in multiple columns within the same pane to utilize the space more efficiently and reduce scrolling. Is there an available option in DataTables' SearchPanes to arrange values in several columns within one single panel?

colin

That's a nice idea, but not something that's supported I'm afraid. Could you achieve a narrower table with CSS?

Colin

yakov116

I have done this with CSS.

` .dtsp-paneInputButton.dtsp-search {
width: 100%;
}

.dtsp-titleRow {
    display: none;
}

.dt-scroll-body thead {
    display: none;
}

.dt-scroll-body tr {
    display: inline-table;
}

#tables .dt-scroll-body tr {
    margin: 0.25em;
    width: 13.5em;
}

#tables .dt-scroll-body tr:nth-child(4n + 1) {
    clear: left;
}

:is(#names, #userID, #reports, #docs) .dt-scroll-body tr {
    width: 20em;
}

:is(#names, #userID, #reports, #docs) .dt-scroll-body tr:nth-child(3n + 1) {
    clear: left;
}

:is(#names, #reports, #docs) .dt-scroll-body {
    height: 50px !important;
}

.dt-scroll-body .even {
    background: rgba(0, 0, 0, 0.03);
}`

colin

Very nice, thanks for sharing,

Colin

abanet

Thank you so much yacob116!
I see that with CSS my problem can be solved!

I will try that approach knowing that there is nothing that can be done from SearchPanes itself.

Thanks again,
Alberto.