How to add an ID to react-table component?

Question

I'm trying to add a unique id to a bunch of react-tables I have created. I created a custom component that uses react-table.

I've tried adding the id prop to the tag but that is not working, I'm guessing that's because there is no id prop defined on the library ?

return <ReactTable data={props.data} columns={columns} showPagination={false} minRows={5} style={{height :"400px"}} id='someId'/>;

I was expecting for this to add the id attribute into the the div created by the react-table library but that's not happening

Answer 1

Looks like React Table handles this via the getProps attribute on the ReactTable element, which takes a callback that should return your custom attributes. Try the below snippet in your render() function.

const customProps = { id: 'my-table-id' };

return (
  <ReactTable
    data={props.data}
    columns={columns}
    showPagination={false}
    minRows={5}
    style={{height :"400px"}}

    getProps={() => customProps}
  />
);