This post is a continuation of my article on Using React Query with React Table. I recommend reading that first to understand the full context.

We will also be following along with the same set of example code which can be found at github.com/nafeu/react-query-table-sandbox. We will be focusing on the ReactTableFilterSort.jsx file.

You can get it quickly set up with:

git clone https://github.com/nafeu/react-query-table-sandbox.git
cd react-query-table-sandbox
npm install
npm start

What We Are Building


This post is a continuation of my article on Using React Query with React Table. I recommend reading that first to understand the full context.

We will also be following along with the same set of example code which can be found at github.com/nafeu/react-query-table-sandbox. We will be focusing on the ReactTableExpanding.jsx file.

You can get it quickly set up with:

git clone https://github.com/nafeu/react-query-table-sandbox.git
cd react-query-table-sandbox
npm install
npm start

The Expandable Table We Want To Build


React Query and React Table are two incredibly dandy libraries to supplement React Development. React Query provides an opinionated way of approaching data synchronization and React Table makes the most annoying parts of modernizing HTML tables easy.

In this post, I’ll demonstrate one way you can combine the two of them together. This post assumes that you are already somewhat familiar with react-query and react-table, but in case you aren't, I'll go over some key ideas from both libraries first. …


Easily Use TypeScript and Markdown with Deno to build a Static Site Generator

Building static web content is an absolute necessity. If you’ve been active in web development any time in the last 10 years, you’ve more than likely come across static-site generators like Jekyll or Gatsby. Even CMS systems like Wordpress perform quite a bit of static content generation.

Thanks to modern JavaScript, you don’t have to be a programming wizard to build fancy static-site generators. In fact, you can accomplish quite a lot with very little code. …


I once had a coworker send me a dummy website as part of testing requirements for a code review. The website just had one button, and the button triggered some JavaScript. It was meant to be used in tandem with an iframe to test a larger, more sophisticated feature that she was working on. The site was sent to me in a zip file with simple instructions: unzip, cd test_site, npm install and npm start.

There was one part of that whole process that I could honestly never get out of my head.

I just downloaded 200+ megabytes of Node…


This article will be an example driven guide on writing promises, consuming them through async/await code, and using them in loops.

As a note, this article assumes that you are already familiar with concepts such as Blocking vs Non-Blocking code in JavaScript and have maybe even seen (or written) a promise before.

If you are interested in more of a deep dive on promises, be sure to check out Mozilla’s official docs on promises on the MDN website.

The Example We Will Build Up To

For those who want to skip straight to the conclusion, here is the example that we are building up to:

A Classic Way of Delaying Code Execution

A…


Icon by https://thenounproject.com/paisurangkana/

If you want to skip to the goods, this is the command that we will be working up to:

Open changed or modified files in editor

Simplifying The Burden of Retracing Steps

Frequent context switching between tasks, returning to yesterday’s work or thinking about how to continue an old project that hasn’t been touched in a while can make any energetic coder feel drained in less time than expected. When you’re in this spot, your tasks may include:

  1. Remembering what problem(s) you were working on
  2. Prioritizing and deciding what the most responsible steps would be to take next in progressing towards your project’s goal
  3. Re-orienting yourself…

One of the easiest ways to speed up JavaScript development is to lint and format your code. Linters help you find bugs and formatters help you with code styling.

You can trigger code linters and formatters on a precommit script, you can run them manually on individual files and you can even paste your code into an online code linting/formatting website to have it done for you, but wouldn’t it be great if you could automatically run that magic right inside your editor?

This tutorial will walk you through setting up ESLint (using SublimeLinter) and Prettier (using jsPrettier) to do…


A beginner friendly tutorial on adding real-time functionality in Node.js apps using Socket.io

Prototyping and building real-time web applications has never been as easy as it is today. There are many libraries that have taken away the complexity of utilizing WebSocket technology. In this tutorial, we will look at using Socket.io and JavaScript in conjunction with Express and Node to build an incredibly simple and minimal presentation slides app that lets you update slides in real-time from any internet connected device. Once completed, you can totally show it off at your next tech talk or lunch & learn.

The demo…

Nafeu Nasir

is a musician and full-stack web developer from Toronto, Canada who studied Computer Science and Linguistics at the University of Toronto.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store