• ReactJS

    React Table 7.x – Hide Column Header Row

    Scenario: I am using the new React Table 7x (the headless component). By default there will be a column header for the entire table columns. You can give empty string so that the Header will not be shown. By the problem is that row in html will be still rendered (see the below image). So I want to hide the entire row in html. I am using Material Table with react-table to render the table. Solution Add a custom key hideHeader:Β false, in the columns variable. In the Material table check for this key. This should remove the empty row from html output. Happy coding 🌟 πŸŽ„ πŸŽ… 🦌

  • ReactJS

    File upload in Material UI

    For basic file upload you can use the TextField component. The code will looks something like this. The important thing to note here is you need to set the type props to file How do you customize it? As the basic controls are not that fancy we may need to customize it. Since we are using Material UI its straight forward. Step 1 Create an html input with id and file properties. Use style='display:none' as we don’t want to show it. The code will look like this Step 2 : Customize it Create a label around the input which we created in step 1Add Material UI Button or Fab based…