(Grid js) I want the search button to be on the right side and the add button on the left, what do I do?

user_14854373 0
Viewed 881

(Grid js) I want the search button to be on the right side and the add button on the left, what do I do?

new gridjs.Grid({
        columns: ['Name', 'Email', 'Phone Number'],
        search: true,
        data: [
            ['John', 'john@example.com', '(353) 01 222 3333'],
            ['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
            ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'],
            ['Nisen', 'nis900@gmail.com', '313 333 1923']
        ]
    }).render(document.getElementById("user-table"));
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    

 <div id="user-table"></div>

gridjs javascript
2 Answers
user_3759660

I have the same problem as you, I did this ↓

function insertButtonToTableHeader() {
    // create a button-wrapper
    const button_wrapper = document.createElement('div')
    button_wrapper.className = 'float-left'

    // Insert buttons to button-wrapper
    function insertButtonToButtonWrapper(buttonName) {
        let button = document.createElement('a')
        button.innerText = buttonName
        button.className = 'btn btn-primary'
        button_wrapper.appendChild(button)
    }
    insertButtonToButtonWrapper('Insert')
    insertButtonToButtonWrapper('Import')

    // add button-wrapper to table header
    const grid_js_head = document.querySelector('.gridjs-head')
    const gridjs_search = document.querySelector('.gridjs-search')
    grid_js_head.insertBefore(button_wrapper, gridjs_search)
}
insertButtonToTableHeader()

for reference only, every time you forceRender() the gridjs, the button will gone, so you need to call insertButtonToTableHeader() when forceRender() executed.

user_143644240
Related