React on Taha Husain

React Table - How to implement row selection with controlled server-side pagination

Fri, 22 Oct 2021 15:12:17 +0530

In this blog, we will implement multi-row selection and select all with controlled server-side pagination in React using React Table hooks.

We will use examples provided by react-table for controlled pagination and row selection and pagination and work our way to acheive desired result.

Implementation

Step 1

To select all rows, we would need unique identifier of all rows pre-fetched on the page. Pass all ids to the Table component.

Step 2

Use getToggleAllRowsSelectedProps instead of getToggleAllPageRowsSelectedProps for header checkbox to trigger rows select event across all pages. Note - getToggleAllRowsSelectedProps works seamlessly for frontend pagination, but needs to be customized for server-side pagination.

Capybara with Rspec - How to find and assert fields

Fri, 01 Oct 2021 11:45:14 +0530

Capybara provides find_field API to find input fields.

find_field('id_of_checkbox', type: 'checkbox')

To add assertions for input fields we can use Rspec matcher have_field which has similar usage as find_field.

expect(page).to have_field('id_of_checkbox', type: 'checkbox')

In some cases input fields are not found using find_field, specially when input field(s) are added by third party library.

Let’s take an example of toggle component that we recently used to understand this problem better.

<Toggle
  id="toggleId"
  name="toggleName"
  size="large"
  isDisabled={disableToggle}
  value={toggleValue}
  isChecked={toggleValue}
  onChange={handleToggleChange}
/>

Adding above component in react code generates following HTML.

React Datepicker - How to select Date and time in UTC

Sun, 19 Sep 2021 11:28:55 +0530

By default, React Datepicker selects date and time in local timezone. To select date in a specified timezone we need to convert timezone manually. To do so, we may also need to use library like Moment Timezone.

This blog focuses on selecting date and time in standard UTC timezone and its implementation doesn’t require extra library installation.

The original implementation is suggested by @JohnStarich. This implementation has a bit of tweak to accommodate time picker.

React 18 introduces Automatic Batching

Fri, 09 Jul 2021 00:00:00 +0000