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.

Theremin

Sat, 09 Oct 2021 07:27:55 +0530

Theremin - a music instrument played without touching.

It is known to be one of the first electronic instrument, invented about 100 years ago.

Mind blown!

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

Sort query data on associated table in PostGraphile

Tue, 19 Jan 2021 00:00:00 +0000

Ruby 2.7 deprecates conversion of keyword arguments

Tue, 14 Apr 2020 00:00:00 +0000

Ruby 2.7 adds numbered parameters as default block parameters

Tue, 03 Mar 2020 00:00:00 +0000

Rails 6 adds ActionMailer#email_address_with_name

Tue, 22 Oct 2019 00:00:00 +0000

Rails 6 adds ActiveSupport::ActionableError

Tue, 01 Oct 2019 00:00:00 +0000

Rails 6 Pass custom config to ActionCable::Server::Base

Wed, 21 Aug 2019 00:00:00 +0000

Recyclable cache keys in Rails

Tue, 06 Aug 2019 00:00:00 +0000

Rails 6 deprecates where.not as NOR & Rails 6.1 as NAND

Wed, 31 Jul 2019 00:00:00 +0000

Rails 6 adds ActiveRecord::Relation#extract_associated

Wed, 17 Apr 2019 00:00:00 +0000

Ruby 2.6 adds write_timeout to Net::HTTP

Tue, 14 Aug 2018 00:00:00 +0000

Ruby 2.6 adds Binding#source_location

Tue, 24 Jul 2018 00:00:00 +0000

Ruby 2.6 adds String#split with block

Tue, 17 Jul 2018 00:00:00 +0000

Ruby 2.6 adds endless range

Wed, 04 Jul 2018 00:00:00 +0000

Portfolio

Mon, 01 Jan 0001 00:00:00 +0000

Resume

Mon, 01 Jan 0001 00:00:00 +0000