react-data-table-component | A responsive table library with built-in sorting, pagination, selection, expandable rows, and custom | Grid library

Been searching on how to make a excel like filter using react-data-table-component, and found something interesting, like Data Table filtering using react-data-table-component.

Unfortunately, the FilterComponent Component seems to be deprecated, since I can't find anything regarding it but broken links, which is weird for such a interesting feature.

My code is the following:

I am new to React.

I am trying to export JSON data that is displayed using the 'react-data-table-component' to a CSV file.

I have followed the example from this link by copying the exact code snippet provided. Below is my code snippet and the corresponding error occurring during compilation.

Is there any css property on a sidebar, or div, or table, that I'm missing to send my content underneath the Sidebar when opened?

I'm using react-data-table-component.

DataTable over SideBar:

DataTable Css:

Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).

Docker command (from cloned project root with package.json file):

Reading the Docs for React Data Table, there seems to be a way to pass additional Props to an expandableRowsComponent.

This is copy-pasted from the docs:

expandableComponentProps allows you to pass additional props to your expander component and prevents TypeScript from complaining:

In my React project, I'm trying to output a table (using react-data-table-component).

So here it is my code:

The title almost says it all. But here I provided some examples and a sandbox for you to see what I'm talking about.
Here is a link to the sandbox that I created and added all dependencies.
As you can see in the first picture, my dropdown menu goes behind everything and part of it literally becomes hidden. It's there but not visible

And here is what a dropdown should look like:

I thought to myself that the problem might be because of the z-index. But the element has a z-index: 1000; style applied to it and you can see the applied styles and selected element in chrome inspect in the below picture. As you can see the element's full rectangle is highlighted in inspect but is not visible.

But there is a position: fixed; header with a dropdown menu inside of it which uses react-bootstrap dropdown as well. But it is shown perfectly and without any problems. I gave that header a static position and here is the result. The dropdown was still being shown perfectly.

I've been thinking and searching about this problem for weeks and still couldn't find a solution. Any help will be much appreciated and thank you in advance.

I am making a form in React using Material UI and displaying the form data in a table on client side, the problem is when I Select language by the select dropdown then I get an error of TypeError: event.target.getAttribute is not a function. Although This language data is not displayed in the table but I need it, it needs to be stored in the database(which currently I have not implemented)

I have referred Material UI select throws event.target.getAttribute is not a function and also this github issue but it did not worked for me.

Currently I am not using any state management tool like redux, I am passing down props from my App component.

Please help me as in where am I going wrong

App.js

I'm trying to dynamically generate the columns of a grid. ( react-data-table-component ).

Here is an example of how to define the column.