Exploring JavaScript Libraries
Adding click handlers to tables, headers, rows, and cells in React requires knowledge of click handlers and JavaScript. Setting a “selected” style on clicked rows adds a CSS angle. In this tutorial we will explore to code to create this functionality. Here’s the table we will build in a React app using simple React components. … Read more
It can be useful to custom style Bootstrap Table rows with extra height or padding. However, there are some styling challenges with HTML tables (and Bootstrap tables) that make it difficult to know how to add styling and yet let the table have a responsive height. In this tutorial, we will create the following table … Read more
Bootstrap tables have different column width behavior based on the combination of table-layout styling and column width styling. In this tutorial we will explore how default table-layout, width: auto, and table-layout: fixed on the table affect column width. We will then customize table column width. Here are the three tables we will create. Each has … Read more
Bootstrap does not have IconButton components (unlike Material UI), but we can create and style custom icon buttons. In this tutorial I will create several examples that style Bootstrap icon button width, height, border, color, and alignment. Here are the Icon Buttons we will make: Full code for this tutorial is in the Resources section. … Read more
Ant Design buttons can have their hover color customized or removed easily by creating the right CSS selector and style. In this tutorial I will update hover color for all AntD buttons, for individual AntD buttons, and for different button types (dashed, text, etc). I will also show how to remove button hover. Here are … Read more
Ant Design icon buttons can be created in three ways: In this tutorial I will show how to create all three. I will also show how to control width, height, icon color, background color, and border. Here’s what we will create: Ant Design Icon Button Color and Background Color The first Icon Button I created … Read more
Ant Design Table Rows can be styled by targeting classes built-in to Ant Design tables. This makes height, font size, background color, and more styling easy to control. We can also quickly apply row click handlers using the onRow prop. Inside this prop we have access to row data, index, and event objects. Here is … Read more
Ant Design is currently the second largest React component library, and it was created to reduce design waste and friction. In this tutorial, we will explore customizing table column width using column object fields, custom classes, and class overrides. We will build this simple table where each column’s width is set differently. Full code for … Read more
The MUI Theme can be customized with new values for existing breakpoints, and it can even have new breakpoints added (i.e. bg: 1000). In this tutorial we will customize theme breakpoints and show an example of every breakpoint function being used (i.e. theme.breakpoints.up and theme.breakpoints.down). Here’s a screenshot of what we will create. It can … Read more
Sometimes just because we can code something doesn’t mean we should use it in production. That’s how I feel about creating an expandable/collapsible row in the Material UI DataGrid. In this tutorial, I added expand and collapse to the free MUI DataGrid (imported from “@mui/x-data-grid”). See the screenshot below: This feature is only available on … Read more
