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

Question

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>

I would like to have an add button. Located on the left side, in line with the search button as well, Do you have a method or not ? — Tee Adkins, Dec 23 '20 at 06:53

score 3 · Answer 1 · answered Jan 07 '21 at 23:59

3

You can customize CSS class of the search box:

.gridjs-search {
  float: right;
}

Demo: https://codesandbox.io/s/gridjs-custom-search-box-j0q9l?file=/index.html

answered Jan 07 '21 at 23:59

Afshin Mehrabani

33,262
29
136
201

score 1 · Answer 2 · edited Jan 11 '21 at 09:29

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.

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

2 Answers2