I used Material UI DataGrid (@mui/x-data-grid": "^7.12.1") in SharePoint spfx webpart solution. Obviously, that wasn’t a good decision, but too much was already done.

To pass parameters via Get, it was necessary to assemble a string from the selected Checkbox values. In the project, I used Checkbox from Fluent UI, but the approach is similar for another component. Actually, this is not even about React, but about TypeScript.

As it turned out, FluentUI DatePicker for React doesn't contain a built-in German localization. If you need one, you can use my version.

Below you can find a small snippet to calculate the difference between 2 times in string format in TypeScript. If you use JavaScript, remove the types.

The code of the React component to scroll DIV content by axe X. It can be useful when you have a wide table and a narrow screen. Or a designer had a very cool idea of the interface.

In HTML tag 'input type = number' is not very user friendly. So, I always implement it as a text with transformation text to number.

Sometimes I like to use calculate different measures for one or another site. Last weekend I read about Lighthouse – it’s a part of DevTools in Google Chrome. I have already forgotten that I have such a powerful tool in my pocket and don’t use it. What is Lighthouse? Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

DataGrid looks like a table, but it's another component, it consists of multiple div-elements. But for a user it's a table and common table attributes are often required. One of them is striped rows. Below there's an example how to implement it.

If you use a Pro version of Material UI, then you have a tool, how to switch the cells in the DataGrid table. But if you work with a wide table and you just want to make it more comfortable to work with it, there are some tricks for that. The first thing is to 'freeze' the header, so user can collate the column and headers. All the Excel users like this function. And the second thing is to allow user scroll the page if he has a small resolution and he doesn't have touch screen.

To modify the size of the TextField component in Material UI, you can make several things. The basic modification is obvious, but other ones are not so. By default, the component TextField is rather big and it's really a common task to make it less.