5

I'm using the gridjs-react library to create a table as follows:

<Grid
  columns={['Name', 'Email']}
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  ref={tableRef}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

However, I want to ultimately add an item to the dom to get this:

enter image description here

I thought about using ref but I couldn't get access to the following div since it is only rendered after the component Grid is mounted: (As far as I know)

enter image description here

lissettdm
  • 12,267
  • 1
  • 18
  • 39
usersina
  • 1,063
  • 11
  • 28
  • that field is a `Search` component you highlight. You should not use a `Search` field for adding new values to data – buzatto Jan 23 '21 at 17:07

2 Answers2

3

You can access the grid reference in useEffect block when all it's content is rendered:

useEffect(()=> {
    const grid = ref.current.wrapper.current; //--> grid reference
    const header = grid.querySelector(".gridjs-head"); //--> grid header
    const itemContainer = document.createElement("div"); //--> new item container
    header.appendChild(itemContainer);
    ReactDOM.render(<Input />, itemContainer); //--> render new item inside header
  }, []);

You will need to use css to get the desired position inside the element.

Working example: https://stackblitz.com/edit/react-r5gsvw

lissettdm
  • 12,267
  • 1
  • 18
  • 39
0

Or just use a CSS solution for that component you want.

e.g.

<div style={{ position: 'relative'}}>
    <Grid 
    ....
    />

    <MySearchComponent style={{ position: 'absolute', top: 0, right: 0 }} />
</div>
Someone Special
  • 12,479
  • 7
  • 45
  • 76