In this tutorial, I want to show you how to use React Table Library with its resize feature. In the previous example, you installed React Table Library to create a table component. Now, we will enable users to resize columns in the table by clicking on a vertical bar in the header of the column, and dragging left or right. All you need to do…
Quite recently, in a React freelance project of mine, I came across a React pattern where I had been using the same UI components repetitively across multiple pages tied to specific page information . Let's walk through this thing that I name Context Injection in React. Let's say we have an App component which splits its top-level navigation…
In this tutorial, I want to show you how to use React Table Library to create a table component in React . After this part, there are many other parts giving you examples for searching , filtering , sorting , selecting , nesting tree tables , and pagination for your React table by using React Table Library. Let's start with the basics…
A short React tutorial by example for beginners on how to create an indeterminate React Checkbox which uses an indeterminate state (also called tri state ). Let's start with a checkbox example from our previous tutorial: Now we want to extend the functionality of this checkbox for handling a tri state instead of a bi state. First, we need to…
A short React tutorial by example for beginners about using a checkbox in React. First of all, a checkbox is just an HTML input field with the type of checkbox which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this checkbox: In your browser, this checkbox can already…
In this tutorial, I want to show you how to use React Table Library with a filter feature. In the previous example, you installed React Table Library to create a table component. Now, we will enable users to filter data in the table. React Table Library does not come with a native filter feature, however, as you have access to the data from…
A recent React freelance project of mine offered me a challenging task: The client wanted to have a tree table component in React. The role model for this was MacOS's Finder and its tree view; and as a cherry on top: it should be able to fetch asynchronously up to 100.000 items in chunks as paginated and nested lists. Over the next months, I built…
When working with multiple developers on one React application, it's always good to align the team on a common set of best practices. This holds also true for styling React components . Over the past years, I was fortunate to work with many React freelance developers on different applications where we had to align the best practices throughout…
After I rewrote my book The Road to React with React Hooks using function components instead of class components, aspiring React beginners always ask me whether React class components are going away . I always give them the same short answer, however, I thought it would be good to have this brief explanation here as well. Yes, React class…
In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features. Before we can start, let's establish what we have as a baseline from the previous useReducer tutorial: Our React application…
