React Griddle data table

Question

I want to hide the filter input search field and settings button. I tried below code but search field and settings button still visible.

<Griddle 
              plugins={[plugins.LocalPlugin]}
              data={griddleData}
              showFilter={false}
              showSettings={false}
              resultsPerPage={10}/>

Answer 1

Since what you tried is not working, I assume you are using Griddle v1. The syntax you were using is the old v0 syntax which is now obsolete:

          showFilter={false}
          showSettings={false}

In Griddle v1, you can create your own layout component by defining the following:

const griddleLayout = ({Table, Pagination, Filter, SettingsWrapper}) => (
    <div>
        <Pagination/>
        <Table/>
    </div>
);

Above you can notice that I decided to only display Pagination and Table, hence hiding the Filter and SettingsWrapper.

And then you are able to override the default layout component so it uses your own:

<Griddle
    ...
    components={{
        Layout: griddleLayout
    }}
    ...
</Griddle>

Refs:

• Old syntax (v0): https://griddlegriddle.github.io/v0-docs/customization.html

• New syntax (v1): https://griddlegriddle.github.io/Griddle/docs/customization/