DEV Community: Dima Vyshniakov

Data Table From Scratch. Part 9: Delete Rows

Dima Vyshniakov — Sun, 05 Oct 2025 19:15:04 +0000

This is a single article from a series about creating of an advanced Data table component using React, TanStack Table 8, Tailwind CSS and Headless UI. In this chapter we focus on table editing capabilities

Welcome to the Data table workshop. In the previous exercise, we implemented row selection. Now, we'll apply that functionality to build one of the most common table interactions: row deletion.

We will implement the following workflow:

User selects certain rows (e.g., result of filtering).
User clicks the delete button.
User confirms the choice in a dialog.

Implement row deletion logic

To make the table's data editable, we must first stop treating it as a static prop and manage it as internal state. The best way to encapsulate this logic is by creating a custom React hook at src/DataTable/features/useTableData.ts.

The hook receives the four props:

tableDataProp: Row[]: all table rows;
rowSelection: RowSelectionState: informs the hook about current selection;
clearSelection: () => void: helper to reset the selection UI;
onEdit: (editState: EditState) => void: callback to inform which rows are edited.

Inside the useTableData hook, we first clone the incoming tableDataProp into local state. We use an arrow function inside useState to ensure this cloning operation runs only once on the initial render, not on every re-render. An accompanying useEffect hook keeps our local state synchronized if the tableDataProp changes from an external source, like a new data fetch.

const [tableData, setTableData] = useState(() => [...tableDataProp]);

useEffect(() => {
  setTableData(() => [...tableDataProp]);
}, [tableDataProp]);

`deleteRows` function

The core of our new hook is the deleteRows function. It orchestrates the entire deletion process in a few clear steps.

First, it converts the rowSelection object (e.g., { '2': true, '5': true }) into an array of numeric row indices. For efficient lookup, this array is then converted into a Set to achieve optimal O-complexity of the function. Then we filter the tableData array, keeping only the rows whose indices are not in the rowsToDelete set. This new, filtered array becomes our nextTableData.

After updating the local state with setTableData, we build an EditState map to inform the parent component which rows were removed. EditState is a vocabulary object containing row indexes as keys and updated row data as values. In case of deletion, we just assign them to false.

Finally, we call clearSelection to reset the UI, unchecking the checkboxes for the now-deleted rows.

const deleteRows = useCallback(() => {
  const normalizedRows = Object.keys(rowSelection).map((rowIndex) =>
    Number(rowIndex),
  );

  const rowsToDelete = new Set(normalizedRows);

  const nextTableData = tableData.filter((_, i) => !rowsToDelete.has(i));

  setTableData(nextTableData);

  const editState: EditState = Object.fromEntries(
    normalizedRows.map(rowIndex => [rowIndex, false])
  );

  onEdit(editState);

  clearSelection();
}, [clearSelection, onEdit, rowSelection, tableData]);

Integrate hook to `DataTable` component

With our hook ready, let's integrate it into the main src/DataTable/DataTable.tsx component. We'll start by adding a new optional prop, onTableEdit, to allow parent components to react to data changes.

type Props = {
  //...
  /**
   * Callback to capture table data changes
   * @see RowSelectionState
   */
  onTableEdit?: (editState: EditState) => void;
};

Next, we'll call our new hook inside the DataTable component. Notice the clean separation of concerns: useRowSelection manages which rows are selected, while useTableData handles the data manipulation. By passing handleClearSelection as a callback, we allow the data hook to control the selection UI without being directly coupled to it. This keeps our logic pure and more testable.

Finally, we pass the stateful tableData from our hook directly into the useReactTable instance instead of the original prop.

const { rowSelection, handleRowSelection, handleClearSelection } =
  useRowSelection({
    rowSelectionProp,
    onRowSelect,
  });

const { tableData, deleteRows } = useTableData({
  tableDataProp,
  rowSelection,
  clearSelection: handleClearSelection,
  onEdit: onTableEdit
});

const table = useReactTable({
  //...
  data: tableData,
})

Create deletion UI

Now for the user-facing part. To prevent accidental deletions, we'll create a confirmation dialog at src/DataTable/dialogs/DeleteDialog.tsx.

Outside a standard dialog properties DeleteDialog receives rowsAmount to display how many rows are selected for deletion, and onDelete: callback that will trigger deleteRows function.

Inside the component, the delete click handler invokes both onDelete and onClose callbacks.

export const DeleteDialog: FC<Props> = ({
  locale,
  rowsAmount,
  isOpen,
  onClose,
  onDelete,
}) => {
  const handleDelete = useCallback(() => {
    onDelete();
    onClose();
  }, [onClose, onDelete]);
  return (
    <TableDialog title="Confirm deletion" open={isOpen} onClose={onClose}>
      <div className="text-white/80">
        Do you want to delete{' '}
        <span className="font-semibold tabular-nums">
          {formatRowsAmount(rowsAmount, locale)}
        </span>{' '}
        row(s)?
      </div>
      <div className="mt-6 flex justify-evenly gap-3">
        <Button
          className="min-w-32"
          onClick={onClose}
          title="Cancel"
          icon="hand-palm"
        />
        <Button
          className="min-w-32"
          onClick={handleDelete}
          title="Delete"
          icon="trash"
        />
      </div>
    </TableDialog>
  );
};

Connect `DeleteDialog` with `DataTable`

DeleteDialog is built to consume deleteRows and handleClearSelection functions from the hooks we updated.

<DeleteDialog
  onDelete={deleteRows}
  onClose={closeDeleteDialog}
  rowsAmount={selectedRows.length}
/>

Demo

Here is a working demo of this exercise.

To be continued.

How to prove Gödel’s Second Incompleteness Theorem using TypeScript

Dima Vyshniakov — Mon, 21 Jul 2025 08:35:59 +0000

Intro

In our previous article, we explored Gödel's First Incompleteness Theorem and created a simplified model in TypeScript to demonstrate that any sufficiently powerful and consistent formal system will contain true statements that cannot be proven within it.

Definition

Gödel's Second Incompleteness Theorem states that for any formal system that can express basic arithmetic, cannot prove its consistency.

Recap

Let's quickly refresh the key components from the first article:

Statement: A TypeScript function representing a logical statement. Returns true or false result in case it's provable.
isProvable: A function that checks if a statement is provable within our system.
formalSystem: A Map that stores our statements, with their Gödel numbers as keys.

We'll be using these same building blocks to prove the second theorem

Modus ponens explanation

Modus ponens is a fundamental rule of inference that allows us to draw valid conclusions from conditional statements. It works like this:

We know: A → B (If A, then B)
We observe: A = true
Then we can logically conclude: B = true

For example:

Rule: “If it's raining, then the ground is wet” (R → W).
Observation: “It's raining” (R = true). Conclusion: “The ground is wet” (W = true).

In TypeScript, we can implement Modus Ponens like this:

const modusPonens = (
  rule: (observation: boolean) => boolean,
  observation: () => boolean, 
) => {
  if (observation()) {
    return rule(observation());
  } else {
    return false;
  }
};

Implement consistency

Consistent system is free from contradictions, such as when the same statement can be true and false at the same time.

isConsistent function evaluates whether a formal system is logically consistent. Either Statement or its negation has to be false.

import {ABSTRACT_NUMBER_ARRAY} from './utils.js';

const isConsistent = system => {
  return system
    .values()
    .every(
      statement =>
        statement(ABSTRACT_NUMBER_ARRAY) !== 
        !statement(ABSTRACT_NUMBER_ARRAY)
    );
};

Self-referential consistency statement

This function creates a Statement that asserts: the formal system is consistent.

import {formalSystem} from './first.js';

const selfConsistencyStatement = () => {
  return isConsistent(formalSystem) === true;
};

Proof

Let's add this self-referential statement to the formal system itself. Note that we have all consistent Statements.

import {formalSystem, getGoedelNumber} from './first.js';
import {ABSTRACT_NUMBER_ARRAY} from './utils.js';

formalSystem.values().every(
  statement => statement(ABSTRACT_NUMBER_ARRAY)
); // => true

formalSystem.set(
  getGoedelNumber(selfConsistencyStatement),
  selfConsistencyStatement
);

So what would be the output of selfConsistencyStatement in such a case? If we use Modus ponens rules and assume the following: selfConsistencyStatement() === true, that would satisfy our isConsistent constraint, requiring all Statements to return boolean to consider the given system consistent.

But the same logic would be applicable when selfConsistencyStatement() === false. This would make isConsistent() === false, thus making our self-referential statement logically correct. When a system has Statements which can be proven both true and false it's inconsistent.

Now we've proven that selfConsistencyStatement can be formulated in only one way, which makes it both true and false using our system rules. We've shown that any formal system containing basic arithmetic capabilities cannot prove its consistency from within, demonstrating Gödel's Second Incompleteness Theorem in action.

How to prove Gödel’s First Incompleteness Theorem using Typescript

Dima Vyshniakov — Mon, 30 Jun 2025 06:54:50 +0000

The more one learns, the more they realize they don't know. In 1931, a young mathematician named Kurt Gödel proved this feeling is a fundamental feature of the universe of logic itself.

The First Incompleteness Theorem reveals a fundamental limit of logic. It indicates that any formal system of rules, provided it's consistent and complex enough for basic arithmetic, cannot be complete. As Gödel proved, such a system will always contain statements that are true but can never be proven by the system's own rules.

We see numerous examples of such systems, e.g., mathematics, any computer program or anything digital in general is such Gödel's formal system. Any digital artifact can be reduced to a natural number (01011100...) making it a valid formal system.

In this article, we’ll explore how to simulate this concept using TypeScript. This language fulfills all theorem requirements: it is capable of general-purpose computation and non-contradictory. While the full proof requires deep mathematical machinery, we’ll create a simplified model to explain Prof. Gödel's way of thinking.

Define a statement

First, we want to define the basic building blocks of our formal system. Gödel's proof started with basic operators assigned unique numbers, the same approach as tokenization during the Retrieval-Augmented Generation (RAG) process. Then he compiled basic axioms using these tokens, then more complex formulas and so on. Each of them is expected to have their own unique Gödel's number.

In our system we will operate with more complex Statements which are Typescript variadic functions accepting numbers as parameters. The original approach would require using something like Abstract Syntax tree parsing.

type Statement = (...params: Array<number>) => (boolean | unknown)

For brevity's sake, we'll take the derivation and combination of these statements out of the picture and assign these numbers using just a string hash of the statement function. Though, this problem is also Turing complete and can be resolved algorithmically.

const getGoedelNumber = (statement: Statement) => {
  return getStringHash(`${statement}`);
};

Each statement in our system can return a Boolean value or something else.

Build a formal system

First, we define basic logical properties that define equivalence relations and operations.

STATEMENTS: Array<Statement> = [
  // Reflexive
  A => A === A,
  // Symmetric
  (A, B) => A === B && B === A,
  // Transitive
  (A, B, C) => (A === B && B === C) && A === C,
  // Additive
  (A, B, C, D) => (A === B && C === D) && A + C === B + D,
  // Multiplicative
  (A, B, C, D) => (A === B && C === D) && A * C === B * D,
];

The operation of converting Gödel numbers to statements should also be possible in our system. We are going to use ECMAScript Map to achieve this.

const formalSystem = new Map(
  STATEMENTS.map(statement => [getGoedelNumber(statement), statement])
);

Check provability

Each statement in our system is considered provable when it returns a Boolean value (basically something we can agree or disagree with) or something else, which indicates it's not provable.

const isProvable = (goedelNumber: number) => {
  return (
    typeof formalSystem.get(goedelNumber)(...VARIADIC_NUMBER_ARRAY) ===
    'boolean'
  );
};

Here is the code to check provability of our system.

formalSystem.forEach(statement => {
  const goedelNumber = getGoedelNumber(statement);
  if (isProvable(goedelNumber)) {
    console.log('Provable', `${statement}`);
  } else if (!isProvable(goedelNumber)) {
    console.log('Non provable', `${statement}`);
  }
});

Create unprovable statement

To prove this theorem, Gödel complied a true statement using these rules, which cannot be proven or disproven in this system at the same time. Here is how we do this.

We will write a statement which attempts to assert that it is not provable. If the system proves it, then it must be false (a contradiction). If it does not prove it, then it is true but unprovable. Due to the lack of diagonal-lemma package in NPM, we have to use recursion.

const unprovableStatement = () => {
  return isProvable(getGoedelNumber(unprovableStatement)) === false;
};

formalSystem.set(getGoedelNumber(unprovableStatement), unprovableStatement);

try {
  console.log(isProvable(getGoedelNumber(unprovableStatement)));
} catch (error) {
  console.info(
    error.message,
    "Formal system couldn't decide if it's provable.",
    `${unprovableStatement}`
  );
}

The existence of such statements reveals a fundamental limitation on formal systems: the fact that there are mathematical and development truths beyond our capacity to fully capture through logical deduction alone.

How to validate user input in Koval UI

Dima Vyshniakov — Wed, 11 Jun 2025 06:17:40 +0000

User input is the most marginal case in web development. Here we are dealing with a literal Human-Computer interaction and having a full set of problems related to it: such as expectation and format mismatches, human errors possibility and a risk of attack.

Client-side input validation is now a cornerstone of user-friendly design. Of course, business critical validation should happen on the backend. But by catching errors on the front end, developers avoid the “round trip” to the server, which saves time and prevents the existential dread of a 500 error page.

But here’s the irony: we’ve somehow managed to complicate things again. Many popular validation libraries today duplicate functionality already built into modern web browsers. Developers frequently find themselves reimplementing or working around native browser form validation features, rather than using them directly.

Koval UI validation principles

React components library Koval UI lets the browser do the heavy lifting. Instead of redoing the browser job, we rely on existing APIs to validate user input and inform about errors if any.

This demo shows how we approach validation. The :user-invalid CSS selector allows us to customize input styling based on its validation state, while the validationMessage property of HTMLInputElement ensures consistent and reliable error display across modern browsers.

Validity checks run when value changes and when the form input belongs to is submitted.

Attribute-based validation

In Koval UI, all input components accept standard HTMLInputElement attributes to perform validation based on their values.

Required inputs

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

The most fundamental check of all. By adding the boolean required attribute, you're telling the user, “I'm not asking for much, just... something.” If they try to submit the form with this field empty, the browser will gently (or not so gently) remind them of their obligation.

import {InputText} from 'koval-ui';

<InputText required={true} />

Validate pattern

The pattern attribute allows checking validity using regular expression. Here is an example using ([^@\s]+@[^@\s]+) pattern for checking email validity.

import {InputText} from 'koval-ui';

<InputText pattern="([^@\s]+@[^@\s]+)" />

Set minimum and maximum length

minLengthand maxLength properties allow constraining length of the input.

import {InputText} from 'koval-ui';

<InputText minLength={3} maxLength={5} />

Customize error message

Developers can customize the text of error messages displayed when a certain error happens.

Here is how to provide custom error messages for pattern validation.

The ValidityState interface represents the validity states that an element can be in, regarding constraint validation. Together, they help explain why an element's value fails to validate if it's not valid.

We default to returning an empty string ('') which signals successful validation.


const validatorFn = (_: unknown, validityState: ValidityState) => {
    if (validityState.patternMismatch) {
        return 'Please provide a valid email';
    }
    return '';
};

<InputText pattern="([^@\s]+@[^@\s]+)" validation={validatorFn} />

Custom validation with callback function

Have you noticed we were using the validation property in the latest example? This property allows us to have various custom validations and emit error message(s) based on their results.

Developers can provide a validation function for this property. This function runs every time the user changes the input value. It should return an error message string if the validation fails, and an empty string if it succeeds.

This example shows a validation callback which allows inputs not longer than 3 symbols, but also accepts fooBar as a correct value.


const validatorFn = (value?: unknown) => {
    console.log('Value captured:', value);
    if (value && 'fooBar'.includes(value.toString())) {
        return '';
    } else if (value && `${value}`.length > 3) {
        return 'Value should not be longer than 3 symbols (except "fooBar")';
    } else {
        return '';
    }
;

<InputText validation={validatorFn} />

And for a more real-world scenario, here's how you could validate an IBAN (20ish symbol bank account number format) using the iban-ts library.

import {isValid} from 'iban-ts';

const validatorFn = (value?: unknown) => {
    if (value && !isValid(`${value}`)) {
        return 'Please provide valid IBAN';
    }
    return '';
}

<InputText
  validation={validatorFn}
  placeholder="DE89370400440532013000" />

Asynchronous validation

Sometimes complex validation rules have to be run asynchronously (e.g., server-side validation). Koval inputs can also accept async functions as validation callbacks. While the async function is resolving, we'll display a handy spinning loader icon, so the user knows something important is happening.

export const validatorAsync = async (value?: unknown) => {
    let result = '';
    try {
        const response = await fetch('https://example.com/', {
            method: 'POST',
            body: JSON.stringify({ inputValue: `${value}` }),
        });
        result = await response.text(); // '' | 'Validation error'
    } catch (error) {
        result = `Server error: ${error}`;
    }
    return result;
};

<InputText validation={validatorAsync} />

Don't worry about overwhelming your backend. Async validators are debounced to prevent excessive requests, ensuring we only send the latest value for validation.

Conditional validation

It is possible to take other form fields values into consideration when validating user input. validation callback receives FormState object as the third parameter.

FormState is a simple key-value object representing the current state of the entire form, letting you sneak-peek at the values of any other field. The type is a standard Record<string, FormDataEntryValue>, where FormDataEntryValue is a built-in browser type for string | File.

type FormState = Record<string, FormDataEntryValue>

Let's look at an example. We have a form with a radio button group named case-selector and a text input. The validation rules for the text input will change based on which radio button is selected. To make this happen, we also add the revalidateOnFormChange={true} prop to our text input, which tells it to re-run its validation function whenever any other part of the form changes.

import {
    Button,
    Form,
    InputGroup,
    InputRadio,
    InputText
} from 'koval-ui';

const validatorFn = (
    value: unknown,
    _: unknown,
    formState: Record<string, FormDataEntryValue>
) => {
    if (formState['case-selector'] === 'lowercase') {
        const isLowerCase = (value as string).toLowerCase() === value;
        return isLowerCase ? '' : 'Only lower case allowed.';
    } else if (formState['case-selector'] === 'uppercase') {
        const isUpperCase = (value as string).toUpperCase() === value;
        return isUpperCase ? '' : 'Only upper case allowed.';
    }
    return '';
};

<Form>
    <InputGroup name="case-selector">
        <InputRadio 
            defaultChecked={true} 
            label="Allow uppercase" 
            value="uppercase" 
        />
        <InputRadio label="Allow lowercase" value="lowercase" />
    </InputGroup>
    <InputText
        revalidateOnFormChange={true}
        validation={validatorFn}
        name="text"
        placeholder="Validity changes according to user choise"
    />
    <Button type="submit">Submit</Button>
</Form>

Now, when the user switches between “Allow uppercase” and “Allow lowercase” the text input instantly knows the new rules and re-validates itself. It just works.

Password validation example

Now we are going to utilize these features to build a password fieldset with password validation and confirmation.

We'll create two fields. The first will be the main password input, armed with a regex pattern to enforce our security requirements. The second will be the password_confirmation field.

The confirmation field will use a custom validation function to peek at the main password's value and check for a match. We'll also use revalidateOnFormChange={true} so that if the user goes back and changes the original password, the confirmation field will immediately know and re-evaluate its validity.

import {
    Button,
    Form,
    FormField,
    InputPassword
} from 'koval-ui';

const validatePasswordConfirmation = (
    value: unknown, 
    _: unknown, 
    formState: Record<string, FormDataEntryValue>
) => {
    if (Boolean(value) && value !== formState['password']) {
        return "Passwords don't match";
    }
    return '';
},

<Form>
    <FormField
        label="Password:"
        hint="Minimum 6 characters, at least one letter, one number and one special character.">
        <InputPassword
            pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$"
            required={true}
            name="password"
            placeholder="******"
        />
    </FormField>
    <FormField
        label="Confirm password:" 
        hint="Retype password from previous field.">
        <InputPassword
            validation={validatePasswordConfirmation}
            required={true}
            revalidateOnFormChange={true}
            name="password_confirmation"
            placeholder="******"
        />
    </FormField>
</Form>

To be continued…

From scratch: Build a CSS Animated React Carousel Component

Dima Vyshniakov — Tue, 20 May 2025 06:54:46 +0000

Welcome to From scratch, our series focused on creating complex UI components with React, Typescript, and CSS4/PostCSS. We'll walk through the process step-by-step, emphasizing browser-first approach to achieve optimal performance and a smaller code footprint by making the most of native browser APIs and features.

In this article, we'll build a CSS animated, React-powered Carousel component. Carousels are like the circus of UIs: they spin, dazzle, and keep users engaged with rotating content. Whether it’s a kid’s amusement park or a digital dashboard, rotation isn’t just motion, it’s magic.

Carousel architecture

This video demonstrates a model of our component. We’ll create a real (or at least, believable) image carousel that rotates smoothly, always keeping one slide fully visible.

This is the HTML code we will use to create such a carousel.

<div class="carousel">
  <div class="scene">
    <div class="viewport">
      <div class="cell-1">
        <img
          src="https://..."
          width="666"
          height="333"
        />
      </div>
      <div class="cell-2">
        <img
          src="https://..."
          width="666"
          height="333"
        />
      </div>
      <div class="cell-3">
        <img
          src="https://..."
          width="666"
          height="333"
        />
      </div>
    </div>
  </div>
</div>

`.carousel`

.carousel {
  --width: 0;
  --height: 0;

  width: calc(var(--width) * 1px);
}

Here, we set two CSS variables: --width and --height (both in px) to set a visual constrains of the carousel. This way we can access their value either in all children's CSS selectors or externally via a React hook (more on this later).

`.scene`

It is required to maintain a reference coordinates and a consistent aspect ratio for all slides.

.scene {
  aspect-ratio: calc(var(--width) / var(--height));
  overflow: visible;
  position: relative;
}

aspect-ratio property is a key to maintaining consistent proportions across all slides. It calculates the aspect ratio (--width divided by --height) using CSS variables and applies it to the scene. This ensures that images or content within the carousel maintain their correct shape regardless of the container size. Additionally, we set position: relative;, which allows us to position elements absolutely within the scene (like images or navigation controls).

`.viewport`

This div will be used to apply 3D transforms required to create the perspective and space effects. Individual cells will be positioned and rotated to show different parts of the content.

`.cell-x`

We need these divs to position each slide in 3D space with a unique rotation angle, creating the illusion of depth and allowing for smooth transitions between slides when viewed from different perspectives.

.cell-x {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    display: block;
  }
}

We add absolute positioning and CSS Flexbox to center content within the cell, and to fit the cell precisely within its container using offsets from the top and left edges. & img selector removes default styling from images (like extra spacing) to ensure they fit perfectly within the cell.

Positioning cells

This schema shows a carousel inscribed in a single unit circle (R = 1). We will use trigonometry to calculate the position for each image. Each position will be defined by α: cell rotation angle, and T: distance from between the center of the cell and x=0, y=0coordinates.

Adjusting rotation

This is where math meets design. Each slide rotates by α = 360° / total cells, creating a seamless loop. For example, with 3 slides, each spins 120°.

.cell-3 {
  --index: 3;
  --cell-rotate: calc(var(--index) * (360 / var(--cells-amount)));
  transform: rotateY(calc(var(--cell-rotate) * 1deg));
}

Apply translate

To create depth, have to find T size. This ensures slides are spaced just right, like slices of a pie. From the trigonometry cycle scheme, we can see that the length of T is equal to the BC side of the right triangle ABC. And the opposite angle equals to α° / 2. This way, we can get the following formula using tangent:

T = W / 2 *  1 / tan(α° / 2)

Now let's shorten and remove α from the equation.

T = W / (2 * tan(π / cells amount))

.cell {
  --t: calc(var(--width) / (2 * tan(pi / var(--cells-amount))));

  transform: translateZ(calc(var(--t) * 1px));
}

Now our DOM looks like the Museum of Modern Art in New York City. Which is artsy, but we want more Disneyland carousel vibes. We need to step out of the circle and center .viewport on the certain cell.

Here is the CSS code to achieve this.

--rotate calculates the initial rotation angle of the viewport based on which cell it should display.

--visibleIndex is the index of the visible cell from the start (0, 1, 2, …).

--translate calculates the initial translation distance along the Z-axis based on the viewport's width and the number of cells.

transform property rotates and moves the viewport, allowing the user to see the current cell from outside the hall. This achieved by negating values which were applied before the currently visible cell. Notice the -1 pixel multiplication factor. We also apply transition and ensure that 3D acceleration is enabled.

.viewport {
  --rotate: calc(var(--visibleIndex) * (360 / var(--cells-amount)));
  --translate: calc(var(--width) / (2 * tan(pi / var(--cells-amount))));
  transform: translateZ(calc(var(--translate) * -1px))
    rotateY(calc(var(--rotate) * -1deg));
  transform-style: preserve-3d;
  transition: transform 666ms ease-out;
}

Making React component

Here is the UI we are going to build. Our goal is to give user ability to rotate the carousel. We will connect React state with CSS using two utility libraries: classnames to manage CSS classes and css-vars-hook to manage CSS variables.

We'll build Carousel React component at src/Carousel/Carousel.tsx.

Component interface

width/height: Define carousel dimensions;
defaultVisible: Which item shows initially (defaults to 0);
showDots/showArrows: Control visibility of navigation elements;
onRotate: Callback when user changes the active item;
exposedMode: Special view mode that shows the 3D structure.

Implement rotation hook

src/Carousel/useCarouselRotation.ts hook is responsible for managing the state of which cell is currently visible in a carousel and providing functions to navigate between these items.

We store the overall carousel moves amount as rotations. visibleCellIndex provides an index of currently focused cell based on number of rotations. For positive numbers, it uses a simple modulo: index % length. For negative, adds the length: length + (index % length). This creates a circular effect where rotating past the last cell loops back to the first and vice versa. rotateRight and rotateLeft are used to change rotation count by 1.

const [rotations, setRotations] = useState(defaultVisible);

const getVisibleCellIndex = (index: number, length: number) => {
  return index % length >= 0 ? index % length : length + (index % length);

const rotateRight = useCallback(() => {
    const nextRotation = rotations + 1;
    setRotations(nextRotation);
    onRotate(getVisibleCellIndex(nextRotation, cellsAmount));
  }, [rotations, onRotate, cellsAmount]);
};

Use rotation state in Carousel

Now we have to consume the data provided by this hook. We will connect them with corresponding CSS variables with the help of the useLocalTheme hook, which creates a local scope of CSS variables and allows us to control them from the component.

import { useLocalTheme } from 'css-vars-hook'

const cellsAmount = Children.toArray(children).length;

const { visibleCellIndex, rotateRight, rotateLeft, rotations } =
    useCarouselRotation({ defaultVisible, cellsAmount, onRotate });

const { LocalRoot, ref } = useLocalTheme<HTMLDivElement>();

const theme = useMemo(
  () => ({
    'aspect-ratio': width / height,
    width: width,
    'cells-amount': cellsAmount,
    rotations: rotations,
  }),
  [width, height, cellsAmount, rotations],
);

return (
  <LocalRoot theme={theme} className={classes.carousel}>
    {/*...*/}
  </LocalRoot>
)

Now we can access these values at div.carousel and its children CSS code.

.carousel {
  width: calc(var(--width) * 1px);
}

.scene {
  aspect-ratio: var(--aspect-ratio);
}

.viewport {
  --rotate: calc(var(--rotations) * (360 / var(--cells-amount)));
  --translate: calc(var(--width) / (2 * tan(pi / var(--cells-amount))));
}

Make carousel cells

The Carousel component will be able to accept any homogenous array of React nodes as children. All children are expected to have the same visual dimensions.

<Carousel width={666} height={333}>
  <img
    src={`https://picsum.photos/666/333?1`}
    width={666}
    height={333}
  />
  <img
    src={`https://picsum.photos/666/333?2`}
    width={666}
    height={333}
  />
</Carousel>

To apply the required transformations, we will wrap them with src/Carousel/Cell.tsx components.

import { Cell } from './Cell.tsx';

const cells = useMemo(
  () =>
    Children.toArray(children).map((element, index) => {
      return (
        <Cell index={index} key={index}>
          {element}
        </Cell>
      );
    }),
  [children],
);

return (
  <LocalRoot theme={theme} className={classes.carousel}>
    {cells}
  </LocalRoot>
)

Inside src/Carousel/Cell.tsx we will set up a new CSS variables scope for each cell.

import { useLocalTheme } from 'css-vars-hook';

export const Cell = ({
  children,
  index,
}) => {
  const theme = useMemo(
    () => ({
      index,
    }),
    [index],
  );
  const { LocalRoot } = useLocalTheme();

  return (
    <LocalRoot theme={theme} className={classes.cell}>
      {children}
    </LocalRoot>
  );
};

Inside CSS, we will use index value to calculate cell rotation angle.

.cell {
  --cell-rotate: calc(var(--index) * (360 / var(--cells-amount)));

  transform: rotateY(calc(var(--cell-rotate) * 1deg))
    translateZ(calc(var(--translate) * 1px));
}

Add navigation and exposed mode

We will add navigation elements and exposed mode class based on the props.

import { Dots } from './Dots.tsx';

export const Carousel = ({
  children,
  showDots = true,
  showArrows = true,
  exposedMode
}) => {
  // ...
  return (
    <LocalRoot theme={theme} className={classes.carousel}>
      <div
        className={classNames(classes.scene, {
          [classes.normal]: !exposedMode,
          [classes.exposed]: exposedMode,
        })}
      >
        {showArrows && (
          <button
            className={classNames(classes.navigation, classes.left)}
            onClick={rotateLeft}
          >
            <span className={classes.icon}>◄</span>
          </button>
        )}
        <div className={classes.viewport}>{cells}</div>
        {showArrows && (
          <button
            className={classNames(classes.navigation, classes.right)}
            onClick={rotateRight}
          >
            <span className={classes.icon}>►</span>
          </button>
        )}
      </div>
      {showDots && (
        <Dots
          amount={Children.toArray(children).length}
          active={visibleCellIndex}
        />
      )}
    </LocalRoot>
  );
};

Make carousel responsive

Fixed width and height don't look right on mobile devices with small screens. To fix that, we will make Carousel responsive.

First step, we will add max-width: 100%; constrain to .carousel CSS class.

Next we have to measure the actual responsive with of Carousel and use this data to calculate sizes.

src/Carousel/useResponsiveWidth.ts dynamically tracks the actual width of a carousel container element, allowing it to maintain proper proportions and 3D positioning. useResizeObserver hook returns dimension information when the referenced element changes size. When a new width is detected, the effect updates the responsiveWidth state.

export const useResponsiveWidth = ({width, ref}: Props) => {
  const [responsiveWidth, setResponsiveWidth] = useState(width);
  const rect = useResizeObserver(ref);
  useEffect(() => {
    typeof rect?.width === 'number' && setResponsiveWidth(rect?.width);
  }, [rect?.width]);
  return responsiveWidth
}

Now we have to set --responsive-width alongside the initial --width. The former is used inside for container div and the latter for radius calculation.

const responsiveWidth = useResponsiveWidth({ width, ref });

const theme = useMemo(
  () => ({
    width: width,
    'responsive-width': responsiveWidth,
  }),
  [width, height, responsiveWidth, cellsAmount, rotations],
);

.carousel {
  width: calc(var(--width) * 1px);
}

.viewport {
  --translate: calc(
    var(--responsive-width) / (2 * tan(pi / var(--cells-amount)))
  );
}

Demo

Here is a working demo of the carousel.

Happy coding.

Data Table From Scratch. Part 8: Select rows

Dima Vyshniakov — Sat, 26 Apr 2025 09:09:12 +0000

This is a single article from a series about creating of an advanced Data table component using React, TanStack Table 8, Tailwind CSS and Headless UI. In this chapter we focus on table editing capabilities

The data table saga continues. In the previous chapters, we focused on table viewing features, and now it's time to implement table editing.

The editing process we'll implement follows a common pattern: the user first selects one or multiple rows and then applies an action, such as editing or deleting, to the selected data. So basically, the selection here works similar to focusing in photography.

Enable row selection

src/DataTable/features/useRowSelection.ts contains a hook to manage the selection state for rows, providing a bridge between external and internal selection states.

useRowSelection hook maintains internal state while syncing with external prop. This is achieved by applying effect resetting the internal state (rowSelection) when rowSelectionProp changes. This way, the hook supports both controlled and uncontrolled selection patterns.

const [rowSelection, setRowSelection] =
  useState<RowSelectionState>(rowSelectionProp);

useEffect(() => {
  setRowSelection(rowSelectionProp);
}, [rowSelectionProp]);

handleRowSelection function handles state updates as a function or state object. We safely resolve the function to get the actual state value.

import { RowSelectionState, Updater } from '@tanstack/react-table';

const handleRowSelection = useCallback(
  (nextSelectionState: Updater<RowSelectionState>) => {
    setRowSelection(nextSelectionState);
    if (typeof nextSelectionState === 'function') {
      onRowSelect(nextSelectionState(rowSelection));
    } else {
      onRowSelect(nextSelectionState);
    }
  },
  [onRowSelect, rowSelection],
);

In the src/DataTable/DataTable.tsx component, this hook is integrated as:

import { useRowSelection } from './features/useRowSelection.ts';

const { rowSelection, handleRowSelection } = useRowSelection({
  rowSelectionProp,
  onRowSelect,
});

The resulting values are passed to the TanStack table:

  const table = useReactTable({
    //...
    onRowSelectionChange: handleRowSelection,
    state: {
     rowSelection,
    }
  });

By abstracting the selection logic into this hook, the code maintains a clean separation of concerns and makes the table component more maintainable.

Create selection UI

To make row selection possible, we'll start by adding a new column specifically for selection controls. Within this column, each row gets its checkbox. In the column header, we'll place a main checkbox that acts as a select/deselect all control for the rows currently shown. It's important that the select all action respects filtering: if the user has filtered the data, this checkbox will only affect the visible, filtered rows.

Add selection column

We will extend src/DataTable/columnsConfig.tsx with a new column definition. columnHelper.display() is used to create a display-only table column (not mapped to any data). We assign the column an id selection and a width of 34 pixels.

export const columns = [
  columnHelper.display({
    id: 'selection',
    size: 34,
    cell: ({ row, column }) => {
      return (
        <div className="px-2" style={{ width: column.getSize() }}>
          <Checkbox
            className="text-primary"
            checked={row.getIsSelected()}
            disabled={!row.getCanSelect()}
            onChange={row.getToggleSelectedHandler()}
          />
        </div>
      );
    },
    // ...
  })
  // ...
]

Cell renderer component uses TanStack Row Selection API. row.getIsSelected() controls checked state; row.getCanSelect() allows developers to disable certain checkboxes (see below); row.getToggleSelectedHandler(): creates row selection toggle handler.

Checkbox

The main element we rely on for capturing selection is the src/DataTable/inputs/Checkbox.tsx component. We will use Headless UI and Phosphor Icons to create accessible input.

Here is the component interface. checked prop defines whether the checkbox is selected; indeterminate: enables partial selection state (used for select all when some items are selected); disabled: disallow interaction; onChange: callback to capture value changes.

export type Props = {
  checked: boolean;
  onChange: (value: boolean) => void;
  disabled: boolean;
  indeterminate: boolean;
  className?: string;
};

We will use the Checkbox component from Headless UI to handle logic. Within the component, a useMemo hook selects the appropriate Phosphor icon based on the checkbox's state. Additionally, the checkbox's color and cursor style are adjusted when it is disabled.

import { FC, useMemo } from 'react';
import { Checkbox as CheckboxHeadless } from '@headlessui/react';
import { Icon } from '../../Icon.tsx';
import classNames from 'classnames';

export const Checkbox: FC<Props> = ({
  checked,
  onChange,
  disabled,
  indeterminate = false,
  className,
}) => {
  const checkboxIcon = useMemo(() => {
    if (indeterminate) {
      return 'minus-square'
    } else if (checked) {
      return 'check-square'
    }
    return 'square'
  }, [checked, indeterminate])


  return (
    <CheckboxHeadless
      className={classNames(
        'flex items-center text-lg',
        {
          'cursor-not-allowed': disabled,
          'cursor-pointer': !disabled,
        },
        className,
      )}
      checked={checked}
      onChange={onChange}
      disabled={disabled}
      indeterminate={indeterminate}
    >
      <Icon
        name={checkboxIcon}
        variant="bold"
        className={classNames('shrink-0', {
          'text-disabledColor dark:text-primaryDark': disabled,
        })}
      />
    </CheckboxHeadless>
  );
};

And finally, we will make this column permanently pinned to the left side by providing initial pinning state to useReactTable hook at src/DataTable/DataTable.tsx.

const table = useReactTable({
    // ...
    initialState: {
      columnPinning: { left: ['selection'] },
    },
})

Selection info panel

First, we create a toolbar and adjust the scrollable area at src/DataTable/DataTable.tsx. h-[52px] Tailwind CSS class establishes a fixed height of 52 pixels.

Within this toolbar, the SelectionInfo component is rendered with three props:

locale: Passes the current locale for number formatting
selected: The count of selected rows, obtained directly from the table's selection model (table.getSelectedRowModel().rows.length)
total: The total row count before filtering, ensuring users know the total dataset size (table.getPreFilteredRowModel().rows.length)

<div className="flex h-[52px] items-center gap-1.5 p-1.5">
  <SelectionInfo
    locale={locale}
    selected={table.getSelectedRowModel().rows.length}
    total={table.getPreFilteredRowModel().rows.length}
  />
</div>

maxHeight: calc(100dvh - 52px) style property ensures the table container takes the available viewport height minus the toolbar height.

<div
  style={{
    maxHeight: 'calc(100dvh - 52px)',
  }}
  className="h-min max-w-full overflow-auto"
  ref={scrollRef}
>
//...
</div>

src/DataTable/SelectionInfo.tsx works with the selection column's header cell and individual row checkboxes. This panel gives users clear feedback about their selections, displaying how many rows are selected out of the total available.

We use Intl.NumberFormat to format numbers according to the specified locale. This ensures that numbers are displayed in the appropriate format (e.g., 1,234 in English vs 1.234 in German).

tabular-nums Tailwind CSS class ensures numbers are aligned properly when they change.

import { FC } from 'react';

export type Props = {
  total: number;
  selected: number;
  locale: string;
};

const formatRowsAmount = (amount: number, locale: string) =>
  new Intl.NumberFormat(locale, {
    style: 'decimal',
  }).format(amount);

export const SelectionInfo: FC<Props> = 
  ({ total, selected, locale }) => {
  return (
    <div className="text-sm tabular-nums text-primary">
      <strong>{formatRowsAmount(selected, locale)}</strong> of{' '}
      <strong>{formatRowsAmount(total, locale)}</strong> rows selected
    </div>
  );
};

Exclude rows from selection

The Table selection API allows us to selectively exclude certain rows from selection. We access tableData prop and check if the randomDecimal value exceeds zero. This value is used by the Checkbox component in the selection cell through row.getCanSelect().

  const table = useReactTable({
    //...
    enableRowSelection: row => row.original.randomDecimal > 0,
  });

Demo

Here is a working demo of this exercise.

Next: Delete rows

How to build a tree-shakable library with Vite and Rollup

Dima Vyshniakov — Tue, 08 Apr 2025 11:57:16 +0000

Today we will talk about the Moby Dick of ES Module bundlers. Tree shaking is a smart JavaScript optimization that prunes unused code from your final bundle. It's not just about tidiness; it's a key performance factor, shrinking file sizes and making our applications load significantly faster.

Build as a single file

While modern bundlers aim to provide tree shaking for libraries using ES Modules (identified via module or exports in package.json), the reality is often more nuanced. Achieving optimal results depends heavily on specific configurations. To illustrate, consider Rollup configuration recommended by Vite devs when building in library mode:

import {resolve} from 'path';
import {defineConfig} from 'vite';

export default defineConfig({
    //... other config
    build: {
        sourcemap: true,
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'MyLibraryName',
            fileName: 'index'
        },
        rollupOptions: {
            // Ensure dependencies aren't bundled into the library
            external: external(),
            output: {
                // Define global variable names
                globals: {
                    vue: 'Vue', // Example for Vue
                    react: 'React' // Example for React
                }
            }
        }
    }
});

Package file configuration.

{
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

This example provides us with perfectly capable ES module and UMD builds.

Our library is built in a following way, src/index.ts works as a barrel file containing re-exports of our library modules.

export {ComponentA} from './ComponentA';
export {ComponentB} from './ComponentB';
// ...

A significant drawback of Rollup's standard ES Module bundling strategy is its negative impact on tree shaking in bundlers like Webpack and Next.js. By compiling all module code into a single ./dist/index.js file (which is also designated in the module property of the package.json), even a small import can result in the entire library and its dependencies being included in your application.

While this setup is compatible with Vite and Rollup, Next.js experimental optimizePackageImports feature, which I tested unsuccessfully on version 15.1.6, doesn't seem to resolve this issue.

Build as multiple files

Fortunately, Rollup offers a solution to this tree shaking challenge. By enabling the preserveModules setting, we can maintain the original module structure, significantly improving tree shaking capabilities. This configuration results in the library being built with one file per module instead of a single chunk.

Since this approach is incompatible with the default UMD (Universal Module Definition) build, we've updated the formats setting to ['es', 'cjs'], replacing UMD build with CommonJS.

To manage output file names, we've implemented a fileName function. This ensures the main entry point is output as dist/index.js for ES modules and dist/index.cjs for CommonJS, while other entries retain their original path with the appropriate extension.

import {defineConfig} from 'vite';

export default defineConfig(() => ({
    // ...
    build: {
        sourcemap: true,
        lib: {
            // ...
            fileName: (format, entryName) => {
                if (entryName === 'src/lib/index') {
                    return `index.${format === 'es' ? 'js' : 'cjs'}`;
                }
                return `${entryName}.${format === 'es' ? 'js' : 'cjs'}`;
            },
            formats: ['es', 'cjs'],
        },
        rollupOptions: {
            // ...
            output: {
                // ...
                preserveModules: true,
            },
        },
    },
}));

Bundle size impact

I made a comparison using two different versions of Koval UI library, the first had a single file bundle and the second was split. The total size of the library is approximately 75 kb gzipped. Two small modules were used in the Next.js project.

Here are the results of the next build command.

Build	First load	Server code	Client code
Single file	184 kb	62.4 kb	37 kb
Split by module	124 kb	12.6 kb	10 kb

Use library template

You can use this set up for your projects by cloning the React library template repository. Many other useful features are included.

Let's create international phone number input with React, Tailwind CSS and Headless UI

Dima Vyshniakov — Wed, 12 Mar 2025 09:05:07 +0000

Back in the day, users had to shout a phone number or address to a phone company employee to get connected. Though today, this approach become again popular among automated call management systems, phone inputs made great progress, coming from round plastic deals with 10 digits to modern on-screen interfaces.

We are going to make one of them today. This input will be capable of:

International country code integration. We will provide a clear and easily accessible country code selector, which is essential for global user bases. This feature ensures accurate number formatting.
Input masking. Applying input masks simplifies the entry process by guiding users through the correct number format. This reduces errors and improves readability.
Accessible country list navigation. We are going to provide users a choice from multiple countries. So they should be able to navigate and filter the list effortlessly.

Create a phone field set

Here is a breakdown of the whole international phone number fieldset component.

CountryCodeInput provides a list-box dropdown for selecting country codes. PhoneNumberInput takes care of the phone number entry with format validation. Field from Headless UI provides the form field structure, but we can't use the library's Label component, so we have to implement basic HTMLLabelElement.

import { Field } from '@headlessui/react';

import { countryList } from './countryList.ts';
import { CountryCodeInput } from './CountryCodeInput';
import { PhoneNumberInput } from './PhoneNumberInput';

const App = () => {
  // ...
  return (
    <Field className="flex flex-col gap-2">
      <label className="cursor-pointer text-sm/6 font-medium" htmlFor={id}>
        Phone number:
      </label>
      <div className="flex gap-3">
        <CountryCodeInput
          countryList={countryList}
          value={countryCode}
          onChange={handleCodeChange}
        />
        <PhoneNumberInput
          id={id}
          onChange={handlePhoneChange}
          value={phoneNumber}
        />
      </div>
    </Field>
  );
};

export default App;

The main component (src/App.tsx) maintains two state variables:
phoneNumber which stores the user's entered phone number
countryCode which tracks the selected country code (defaulting to "+1").

import { useCallback, useState } from 'react';
import { countryList, CountryConfig } from './countryList.ts';

// phone number logic
const [phoneNumber, setPhoneNumber] = useState('');
const handlePhoneChange = useCallback((value: string) => {
  setPhoneNumber(value);
}, []);

// country code logic
const [countryCode, setCountryCode] = useState<CountryConfig['code']>('+1');

const handleCodeChange = useCallback((nextCode?: CountryConfig['code']) => {
  if (nextCode) {
    setCountryCode(nextCode);
  }
}, []);

Country codes configuration

Inside src/countryList.ts we'll define a data required to give the user a choice between multiple country phone codes and formats.

CountryConfig type defines the structure for each country entry with:

flag: Unicode flag emoji representation (e.g., “🇫🇷” for France).
code: Country dialing code (e.g., “+33” for France). A template literal type that ensures all country codes start with a + symbol, followed by numbers or other characters.
name: Full country name.
mask: Optional formatting pattern for phone numbers. More on this later.

type Code = `+${number | string}`;

export type CountryConfig = {
  flag: string;
  code: Code;
  name: string;
  mask?: string;
};

Phone number input

The main input of the phone fieldset is located at src/PhoneNumberInput/PhoneNumberInput.tsx. The component accepts four props: id: a unique identifier for the input element; mask: an optional string defining the input mask; onChange: a callback function to handle changes in the input value; value is the current value of the input.

We will use the following Tailwind CSS classes: tabular-nums: consistent number character width, focus:outline-none data-[focus]:outline-2 ...: reset default outline and add custom one.

import { ChangeEvent, FC, useCallback } from 'react';
import classNames from 'classnames';
import { Input } from '@headlessui/react';
import { useMask } from './useMask.ts';

export type Props = {
  id: string;
  mask?: string;
  onChange: (value: string) => void;
  value: string;
};

export const PhoneNumberInput: FC<Props> = ({
  id,
  mask = '______________',
  onChange,
  value: valueProp,
}) => {
  const { options, hasEmptyMask, inputRef } = useMask({ mask });


  return (
    <Input
      placeholder={hasEmptyMask ? 'Phone number' : mask}
      ref={inputRef}
      id={id}
      className={classNames(
        'w-36 rounded-md bg-stone-100 px-2 py-1.5 text-sm/6 tabular-nums text-black',
        'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
      )}
      type="tel"
      onChange={handleChange}
      value={value}
    />
  );
};

Phone input masking

Input masking guides the user to enter their phone number in a consistent and correct format. As the user types, the input field automatically inserts characters like parentheses, hyphens, and spaces at the appropriate positions.

Inside PhoneNumberInput we'll use the format utility from the @react-input/mask library to clean up output value from masking symbols.

import { format } from '@react-input/mask';

// ...

const value = format(valueProp, options);

const handleChange = useCallback(
  (event: ChangeEvent<HTMLInputElement>) => {
    onChange(format(event.target.value, options));
  },
  [onChange, options],
);

The src/PhoneNumberInput/useMask.ts custom hook is used to implement the input mask logic. It returns options for the mask, a boolean hasEmptyMask to check if the mask is empty, and inputRef to reference the input element.

// src/PhoneNumberInput/PhoneNumberInput.tsx
const { options, hasEmptyMask, inputRef } = useMask({ mask });

The hook accepts a single prop (mask), which is a string defining the desired input mask pattern. This pattern specifies how the input should be formatted, with underscores (_) representing digit placeholders.

Within the hook, the useMemo is used to create the mask options. This ensures that they are only recalculated when the mask prop changes, optimizing performance. The replacement object within the options specifies that underscores should be replaced by digits /\d/.

The useMaskVanilla function from the @react-input/mask library is called with the mask options to create a reference for the input element.

The hook also includes a check to determine if the provided mask is empty. This is done by splitting the mask string into individual characters and checking if all characters are underscores. The result is stored in the hasEmptyMask variable.

import { useMemo } from 'react';
import { useMask as useMaskVanilla,  } from '@react-input/mask';

export type Props = {
  mask: string;
};

export const useMask = ({ mask }: Props) => {
  const options = useMemo(
    () => ({
      mask,
      replacement: { _: /\d/ },

    }),
    [mask],
  );

  const inputRef = useMaskVanilla(options);

  const hasEmptyMask = mask.split('').every((char) => {
    return char === '_';
  });

  return { options, inputRef, hasEmptyMask };
};

Country code selection input

A phone country code, also known as an international subscriber dialing (ISD) code, is a numerical prefix that precedes a phone number. Its primary function is to route calls and messages to the correct country or geographical region.

src/CountryCodeInput/CountryCodeInput.tsx accepts three props: countryList, value, and onChange. The countryList is an array of country configurations, value is the currently selected country code (+351), and onChange is a callback function to handle changes in the selected country code.

export type Props = {
  countryList: CountryConfig[];
  value: CountryConfig['code'];
  onChange: (value?: CountryConfig['code']) => void;
};

We'll implement country code input as a combination of Listbox and Input components from Headless UI.

The Listbox component is used to create the dropdown menu. The ListboxButton displays the selected country code and flag, and the ListboxOptions contains the list of country options. This is what the user sees initially.

The Input component is used to filter the country list when there are more than five countries.

We assigned the Tailwind group class to ListboxOption to display a checkmark to indicate the current choice.

<div className="w-24">
  <Listbox value={selected} onChange={handleSelect}>
    <ListboxButton
      className={classNames(
        'relative w-full rounded-md bg-stone-100 px-2 py-1.5 text-sm/6 text-black',
        'flex items-center gap-1',
        'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
      )}
    >
      <span className="text-xl">{selectedFlag}</span>
      <span className="ml-auto grow-0">{selected}</span>

      <Icon
        className="group pointer-events-none size-3.5 shrink-0 text-black/60"
        name="caret-down"
      />
    </ListboxButton>
    <ListboxOptions
      anchor={ANCHOR_PROP}
      transition
      className={classNames(
        'w-56 rounded-md border border-stone-300 bg-stone-100 focus-visible:outline-none',
        'flex flex-col',
        'origin-top transition duration-200 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
        'shadow-md shadow-black/20',
      )}
    >
      {countryList.length > 5 && (
        <div className=" border-b-2 border-b-black/10 p-2">
          <Input
            value={filter}
            onChange={setFilter}
            placeholder="Country name"
            className={classNames(
              'max-w-full rounded-full bg-stone-200 px-4 py-1 text-sm/6 text-black ',
              'focus:bg-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
            )}
          />
        </div>
      )}
      <div className="max-h-48 grow overflow-auto">
        {filteredList.map(({ code, flag, name }) => (
          <ListboxOption
            key={code}
            value={code}
            className="group flex cursor-pointer select-none items-center gap-1 p-1.5 data-[focus]:bg-black/10"
          >
            <div className="size-4">
              <Icon
                className="invisible size-4 text-black group-data-[selected]:visible"
                name="check"
              />
            </div>
            <span className="text-xl/5">{flag}</span>
            <div className="w-9 shrink-0 text-right text-sm/6 tabular-nums text-black">
              {code}
            </div>
            <div className="truncate text-sm/6 text-black/65 group-data-[hover]:text-black">
              {name}
            </div>
          </ListboxOption>
        ))}
      </div>
    </ListboxOptions>
  </Listbox>
</div>

Handle country selection

src/CountryCodeInput/useCountrySelect.ts custom hook manages the selection logic for the country list. It provides the selectedFlag, handleSelect, and selected values to handle the selection and display of the selected country.

useCountrySelect accepts the same props as a parent CountryCodeInput.

// src/CountryCodeInput/CountryCodeInput.tsx
const { selectedFlag, handleSelect, selected } = useCountrySelect({
  onChange,
  countryList,
  value,
});

useCountrySelect maintains an internal state selected to keep track of the currently selected country code. This state is initialized with the value prop and updated whenever the value prop changes.

handleSelect function updates the selected state and calls the onChange callback with the newly selected country code.

selectedFlag variable is computed using the useMemo hook. It finds the flag of the currently selected country by searching the countryList array for the country with the matching code.

Finally, the hook returns these values to be used by the parent component to manage the selection and display of the selected country.

import { useCallback, useEffect, useMemo, useState } from 'react';
import { CountryConfig } from '../countryList.ts';

export type Props = {
  countryList: CountryConfig[];
  value: CountryConfig['code'];
  onChange: (value?: CountryConfig['code']) => void;
};

export const useCountrySelect = ({ value, onChange, countryList }: Props) => {
  const [selected, setSelected] = useState(value);

  useEffect(() => {
    setSelected(value);
  }, [value]);

  const handleSelect = useCallback(
    (selectedCode: CountryConfig['code']) => {
      onChange(selectedCode);
      setSelected(selectedCode);
    },
    [onChange],
  );

  const selectedFlag = useMemo(
    () => countryList.find(({ code }) => code === selected)?.flag,
    [countryList, selected],
  );

  return { selected, handleSelect, selectedFlag };
};

Filter country list

src/CountryCodeInput/useCountryFilter.ts custom hook is used to filter the country list based on user input. It provides a filter state and a setFilter function to update the filter value.

useCountryFilter accepts one parameter countryList (same as above).

// src/CountryCodeInput/CountryCodeInput.tsx
const { filter, setFilter, filteredList } = useCountryFilter(countryList);

useCountryFilter maintains two internal states. The first one, filteredList is for the filtered list, which is initialized with the countryList property and updated whenever the latter changes.

const [filteredList, setFilteredList] = useState(countryList);

useEffect(() => {
  setFilteredList(countryList);
}, [countryList]);

The second internal state is filter which keeps track of the current filter value. This state is initialized as an empty string.

setFilter function updates the filter state and filters the filteredList based on the user input. If the input is not empty, it filters the list to include only countries whose names contain the input value (case-insensitive). If the input is empty, it resets the list to the original countryList property.

import { ChangeEvent, useCallback, useState, useEffect } from 'react';

import { CountryConfig } from '../countryList.ts';

export const useCountryFilter = (countryList: CountryConfig[]) => {
  const [filteredList, setFilteredList] = useState(countryList);

  useEffect(() => {
    setFilteredList(countryList);
  }, [countryList]);

  const [filter, setFilterState] = useState('');

  const setFilter = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setFilterState(event.target.value);
      const nextCountries = countryList.filter(({ name }) =>
        name.toLowerCase().includes(event.target.value.toLowerCase()),
      );
      if (event.target.value !== '') {
        setFilteredList(nextCountries);
      } else {
        setFilteredList(countryList);
      }
    },
    [countryList],
  );

  return {filter, setFilter, filteredList}
}

Finally, we add this block to src/CountryCodeInput/CountryCodeInput.tsx to handle empty filter results.

{filteredList.length === 0 && (
  <div className="py-1.5 text-center text-sm/6 text-black/65">
    No results.
  </div>
)}

Working demo

Here is a full demo of the international phone input component.

Happy coding!

How to create a fancy Link-in-Bio page in less than 5 minutes

Dima Vyshniakov — Sat, 01 Feb 2025 17:21:37 +0000

Now let's see Paul Allen's card. Look at that subtle off-white coloring. The tasteful thickness of it. Oh, my God. It even has a watermark.

Okay, let's be real. How many times have you rolled your eyes at those “professional” link-in-bio tools? They promise the world, deliver a clunky interface drowning in affiliate links (theirs, not yours), and then hit you with a paywall for basic features. Seriously? I was done. Done with the bloat, done with the upselling, and definitely done with paying for something so ridiculously simple.

So, like any seasoned front end developer, I channeled my inner rebel and built my own. A clean, mean, link-slinging machine of pure, unadulterated simplicity. And guess what? It's free. Because the internet shouldn't charge you an arm and a leg for a digital business card. If you're tired of the link-in-bio nonsense, too, stick around. I'm about to spill the tea (and the code).

Quick deployment

So, you're ready to unleash your online persona upon the unsuspecting internet? Excellent. Here's the lowdown on getting your digital business card up and running faster than you can say "link-in-bio alternative" in Traditional Chinese.

First things first, you'll need a GitHub account, a rizz picture of yourself (or a logo, if you're feeling corporate), and, naturally, the links you want the world to click.

Head over to Next Card repo and hit that glorious Use this template button. GitHub will then offer to clone the repository to your own account.

Change ./next.config.js basePath to contain your chosen repository name. This is needed for GitHub pages or other non-index page deployment.

/** @type {import('next').NextConfig} */
module.exports = {
    // ...
    basePath: '/your-repository',
};

Go to Settings > Pages section and enable deployment via GitHub action.

Fill your info

Now, swap out ./card-image.jpg with your picture (or logo, you get the idea) and dive into ./config.ts to customize the details.

Here are the available settings:

title: Your name or company name. Keep it classy.
bio: A short and sweet description.
background: Pick a vibe. fresh, strict, bold, gradient, rainbow.
cardImage: Set the image to be used at the header of the card.
gaId: Set your Google Analytics ID to enable tracking. More on this later.
shareTitle: Localize the sharing link title.

export const config: Config = {
    title: 'Patrick Bateman',
    bio: 'Specialist in mergers and acquisitions',
    background: 'gradient',
    cardImage: image,
    gaId: 'G-XXXXXXXXX',
    shareTitle: 'Share link',
    // ...
}

Add contact links

In the same ./config.ts file, populate the headerLinks array with your contact info and the mainLinks section with your main links. Each entry needs a title (what people see), an id (a unique identifier), a url (where the link goes), and an icon to make it even more graphical. You can get icons from the Phosphor icons collection.

import {
    Envelope,
    GithubLogo,
} from '@phosphor-icons/react/dist/ssr';

export const config: Config = {
    // ...
    headerLinks: [
        {
            title: 'Email',
            id: 'email',
            url: 'mailto:user@example.com',
            icon: Envelope,
        },
    ],
    mainLinks: [
        {
            id: 'github',
            title: 'GitHub',
            url: 'https://github.com/user-name',
            icon: GithubLogo,
        },
    ],
}

Attach vCard file

A vCard, also known as a VCF (Virtual Contact File), serves as a standardized file format for electronic business cards. This file can be attached to your page, allowing visitors to easily import your contact info into their smartphones, Outlook, and other calendar applications without having to copy/paste. You can configure this at ./config.ts. You can also enable isOrganization to display contact as a company.

export const config: Config = {
    // ...
    vCard: {
        firstName: 'Patrick',
        lastName: 'Bateman',
        organization: 'Pierce & Pierce',
        title: 'Vice President',
        birthday: new Date(1961, 9, 23),
        workPhone: '+1 212 555 6342',
        email: 'patrick@psycho.us',
        // isOrganization: true,
    },
}

Deploy website

Commit your changes, push to the main branch and wait until .github/workflows/pages.yml is done. Your Next Card is available at https://<user-name>.github.io/<repo-name>/.

Set up analytics

Next Card plays nice with Google Analytics. Just drop your property ID into the config, and you'll be tracking your visitors' activity and two custom events: link_click and contact_click. Each event reports the link id as a value parameter.

Custom domain

You can even set up a custom domain if you want to get really serious. Check out the GitHub docs for the how-to. And don't forget to remove basePath from ./next.config.js.

Remember, though, even with all these bells and whistles, the Paul Allen business card is still the gold standard. And while you're at it, a star on the repo wouldn't hurt. Don't make me get all American Psycho on you.

How to detect touch devices using browser media queries

Dima Vyshniakov — Mon, 20 Jan 2025 09:11:16 +0000

Web developers often need to determine the input methods available on a user's device, such as touchscreen, mouse, stylus, or combinations thereof. This knowledge helps us to create user interfaces that are accessible and optimized for the specific devices and user interactions.

While common approaches like screen size checks, browser user-agent sniffing, or triggering touch events might seem straightforward, they frequently lead to inaccurate results. These methods rely on assumptions that can easily be invalidated, such as a user connecting a mouse to their smartphone, rendering size-based assumptions useless.

CSS Media Queries provide a more reliable and elegant solution. They allow us to get precise and correct information based on specific device characteristics, including input modalities. In this article, we will study pointer and hover Media Queries. Furthermore, I will show how to implement them as a React hooks.

`pointer` media query

The pointer media query checks whether the device has a primary pointer input capability (like a mouse or touch panel) and how precise it is.

This query returns one of these results:

none: no pointing device is available (e.g., voice-controlled devices).
coarse: a pointing device is present, but it's not very precise (e.g., a finger on a touchscreen).
fine: a highly accurate pointing device is available (e.g., a mouse cursor).

window.matchMedia method allows us to conveniently access Media Queries' results from the code.

`useMatchMedia` hook

To avoid code duplication, we will create the src/useMatchMedia.ts hook to be able to get results of Media Queries and track their changes.

The window.matchMedia method is used to evaluate the media query. If the result of the media query (media.matches) is different from the current state (matches), the state is updated.

An event listener is added to the media query to listen for changes. When the media query's match status changes, the state is updated. The cleanup function at the return block removes the event listener when the component unmounts or when the media query parameter changes.

export const useMatchMedia = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {

    const media = window.matchMedia(query);

    if (media.matches !== matches) {
      setMatches(media.matches);
    }

    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);

    return () => media.removeEventListener('change', listener);
  }, [matches, query]);

  return matches;
};

Detect primary pointer capabilities

Now we can create src/usePrimaryPointerQuery.ts which allows determining the primary pointer type of the user's input device. The useMatchMedia hook is called with three different media queries to check for none, coarse, and fine pointer types. The hook checks the results of the media queries and returns the corresponding value from the Pointers enum.

import { useMatchMedia } from './useMatchMedia.ts';

const enum Pointers {
  none = 'none',
  coarse = 'coarse',
  fine = 'fine',
}

export const usePrimaryPointerQuery = () => {
  const isNone = useMatchMedia('(pointer: none)');
  const isCoarse = useMatchMedia('(pointer: coarse)');
  const isFine = useMatchMedia('(pointer: fine)');
  if (isNone) {
    return Pointers.none;
  } else if (isCoarse) {
    return Pointers.coarse;
  } else if (isFine) {
    return Pointers.fine;
  }
};

Detect additional pointer(s)

There can be only one primary pointer by definition, but a device can also have various secondary pointers, such a Bluetooth keyboards, joysticks, e.t.c.

any-pointer media query checks the precision of any pointer device available.

Here is the src/useAnyPointerQuery.ts hook. It is defined to accept a pointer parameter, which is a key of the Pointers enum. Inside the function, the useMatchMedia hook is called with a media query string that includes the pointer parameter.

import { Pointers } from './types.ts';
import { useMatchMedia } from './useMatchMedia.ts';

export const useAnyPointerQuery = (pointer: keyof typeof Pointers) => {
  return useMatchMedia(`(any-pointer: ${pointer})`);
};

Advanced detection capabilities

hover and any-hover media queries allow us to detect devices with even more precision and confidence.

These queries are used to test whether primary or any available input mechanism can hover over elements. In our case, it allows making assumptions about pointer device even more precisely using the following logic.

Pointer value	Hover value	Device
`coarse`	`none`	Modern touch screens
`fine`	`none`	Stylus based
`coarse`	`hover`	Joystick or TV remote
`fine`	`hover`	Mouse

We extend src/types.ts with possible hover query results.

// ...
export const enum Hovers {
  none = 'none',
  hover = 'hover'
}

Now we can build create src/useAnyStylusQuery.ts hook capable of detecting devices equipped with a stylus (any mode). We achieve this by combining two media queries.

import { useMatchMedia } from './useMatchMedia.ts';
import { Pointers, Hovers } from './types.ts';

const useAnyStylusQuery = () => {
  return useMatchMedia(
    `(any-pointer: ${Pointers.fine}) and (any-hover: ${Hovers.none})`,
  );
};

Here is how our hooks detect iPad with stylus.

Working demo

Here is a full demo of the hook.

Happy coding!

Data Table From Scratch. Part 7: Dark theme and refactoring

Dima Vyshniakov — Tue, 14 Jan 2025 13:57:27 +0000

This is a single article from a series about creating of an advanced Data table component using React, TanStack Table 8, Tailwind CSS and Headless UI.

In the previous episode, we implemented a column filtering feature for the table columns.

This article will focus on a collection of smaller, yet impactful enhancements to our project. Think of it as an Interdimensional Cable episode in Rick and Morty, addressing a few important features and refactorings that, while not the main event, are crucial for improving the overall code quality, maintainability, and user experience.

Tokenization

Tokenization refers to the practice of representing design elements and their properties as reusable variables (tokens).

Since we are using sizes and paddings from Tailwind, we need to tokenize only color values. Instead of hard-coding specific values (e.g., teal-600), we will assign meaningful names to these elements (primary, secondary, etc.).

This way, changes to a token affect all elements that use it, ensuring consistency across the entire application. This will be particularly useful for the dark theme.

We put our tokenized colors into ./tailwind.config.js file as a theme.

const colors = require('tailwindcss/colors');

export default {
  //...
  theme: {
    extend: {
      colors: {
        primary: colors.stone['600'],
        secondary: colors.cyan['800'],
        backgroundLight: colors.white,
        textDark: colors.stone['100'],
        textLight: colors.stone['950'],
        hoverColor: colors.cyan['100'],
        borderColor: colors.stone['300'],
      },
    },
  },
};

Then we apply these theme variables instead of directly using Tailwind colors. So bg-stone-600 CSS class becomes bg-primary and so on.

Dark theme

In the past, Windows 95 graced our screens with its predominantly white-blueish backgrounds, a hallmark of its time. As an advanced operating system, it came equipped with state-of-the-art hardware and software, which garnered much appreciation from my generation. WYSYWIG interface paradigm was a refreshing departure from the older, terminal-based environments dominated by black and green hues. Interestingly, today's trend has shifted in the opposite direction.

Now when we have our colors organized we can start making dark theme to respect modern generation's aesthetic preferences.

Modern browsers provide built-in support for dark mode preferences through the prefers-color-scheme media query. This media query acts as a bridge between the user's system-wide dark mode setting and your application's styles.

Tailwind CSS offers a convenient way to implement dark mode with its dark: helper class. This class allows you to easily define styles specific to the dark mode presentation.

Here are our new dark color tokens. We have background token assigned #000 (pure black) value to make the table dark. For the rest of the tokens, we adjusted saturation to achieve the same contrast as we had with a white background.

To achieve a seamless dark mode experience, we'll begin by extending your existing theme to include dark variants of your color tokens. These dark color tokens will be used to style the Data table in dark mode. For instance, we can set the background token to #000 (pure black) to create a dark background for the table.

For the remaining color tokens, it's essential to adjust their saturation levels. This ensures that the text and other elements maintain sufficient contrast against the dark background, preserving readability.

primaryDark: colors.stone['700'],
backgroundDark: colors.black,
textDark: colors.stone['100'],
hoverColorDark: colors.cyan['600'],
borderColorDark: colors.stone['600'],

Here is how we apply the dark theme to the component.

<Input
  //...
  className={classNames(
    //..
    // focus styles light
    'focus:bg-backgroundLight/85 focus:text-textLight focus:placeholder-transparent',
    // focus styles dark
    'dark:focus:bg-backgroundDark/85 dark:focus:text-textDark',
    'transition-all duration-200',
  )}
/>

Columns permissions

To improve the User Experience of the table, we are going to fine tune column capabilities. The goal is to disable some features for some columns.

We will extend the existing hook in src/DataTable/features/useColumnActions.tsx to include a new property: disabled.
This property will be a boolean flag indicating whether a specific feature is disabled for the current column. The necessary information about the column's configuration will be retrieved from the TanStack Table Context API.

type ColumnAction = {
  //...
  /** True when table capability is disabled by config */
  disabled?: boolean;
};

/**
 * React hook which returns an array of table column actions config objects
 */
export const useColumnActions = (
  context: HeaderContext<Row, unknown>,
): ColumnAction[] => {
  //...
  return useMemo<ColumnAction[]>(
    () => [
      // Pin left button
      {
        // ...
        disabled: !context.column.getCanPin(),
      },
      // Pin right button
      {
        //...
        disabled: !context.column.getCanPin(),
      },
      // Sort ASC button
      {
        //...
        disabled: !context.column.getCanSort(),
      },
      // Sort DESC button
      {
        //...
        disabled: !context.column.getCanSort(),
      },
      // Filter button
      {
        //...
        disabled: !context.column.getCanFilter(),
      },
    ],
    [/*...*/],
  );
};

Now, we will use this logic inside src/DataTable/cells/HeaderCell.tsx. We connect the disabled property from the hook to the corresponding Button component prop. Also, we disable pointer events and set 30% opacity for the disabled state using the corresponding Tailwind CSS helper.

In src/DataTable/cells/HeaderCell.tsx, we will integrate the disabled property obtained from the useColumnActions hook into the corresponding Button component.

If the disabled flag is set to true:

Button component will be rendered in a disabled state.
Pointer events will be disabled for the button using Tailwind CSS pointer-events-none class.
Text and icon opacity will be reduced to 30% to visually indicate button state.

{items.map(({ label, icon: Icon, onClick, disabled }) => (
  <MenuItem key={label} as={Fragment}>
    {() => (
      <Button
        disabled={disabled}
        onClick={onClick}
        className={classNames(
          // ...
          // disabled styles
          'disabled:text-textDark/30 disabled:pointer-events-none'
        )}
      >
        {Icon}
        <div>{label}</div>
      </Button>
    )}
  </MenuItem>
))}

Finally, we have to set enableColumnFilter, enablePinning and enableSorting properties for table columns inside src/DataTable/columnsConfig.tsx.

const columnHelper = createColumnHelper<Row>();

export const columns = [
  //...
  columnHelper.accessor('randomDecimal', {
    enableColumnFilter: false,
    enablePinning: false,
    enableSorting: false,
    //...
  }
  //...
]

Debug mode

The last change is a quality of life improvement. Tanstack has a convenient debugging tools available. So we are going to implement debugAll mode.

Inside src/DataTable/DataTable.tsx we will extend component props with debug property. And set this property at useReactTable hook parameters.

type Props = {
  //...
  /**
   * Enable TanStack table debug mode
   * @see https://tanstack.com/table/latest/docs/api/core/table#debugall
   */
  debug?: boolean;
};

export const DataTable: FC<Props> = ({ tableData, locale = 'en-US', debug }) => {
  //...

  const table = useReactTable({
    //...
    debugAll: debug
  });
 //...
};

Chapter summary

In these 7 articles we created the Data table component from scratch, using TanStack table, Tailwind CSS and Headless UI. We implemented the following features:

Multidimensional Scroll: Enables smooth and synchronized scrolling in both horizontal and vertical directions, with sticky header maintaining alignment across the viewport
Responsive Design: Adapts seamlessly to various screen sizes and supports a wide range of data types, including text, numbers, dates, and limited enumerable lists.
Customizable Subcomponents: Dialogs, Dropdown menus, and custom input fields for enhanced user interaction.
High-Performance Virtualization: Enables virtualization techniques to efficiently render around 50,000 rows without significant performance degradation, even on less powerful machines.
Column Pinning: Allows users to pin columns to the left or right of the viewport, improving data focus and readability.
Advanced Sorting and Filtering: Implements intelligent sorting and filtering mechanisms that account for the specific data formats of each column.
Dark Mode Support: Provides a user-friendly dark mode option.

Here is the complete demo of the exercise.

Next: Select rows

Data Table From Scratch. Part 6: Column filtering

Dima Vyshniakov — Thu, 02 Jan 2025 18:44:08 +0000

This is a single article from a series about creating of an advanced Data table component using React, TanStack Table 8, Tailwind CSS and Headless UI.

In the previous episode, we've extended table view functionality with sorting. This time, we are going to allow users to filter table columns.

Table cell filtering applies provided criteria to all cells of the certain column and shows the result to the user.

Here is the demo of the feature.

Create filter UI

This feature involves several UI elements. We need to create the following components:

Dialog. The component to show modal content over the main flow.
Various inputs field. Required to capture user filter changes.
Button. To be able to set filter.

Reusable `TableDialog` component

We are going to create the TableDialog component using Headless UI. We use Tailwind CSS stone-* colors to match already used in the table. Component is placed in src/DataTable/dialogs/TableDialog.tsx file.

Here are 3 goals we'll achieve with the TableDialog component

Reusability: the component is reusable and accepts various content (children). It also has an optional title for the header text, an open prop to control the modal state, and an onClose callback for closing the dialog.
Backdrop: We use the DialogBackdrop component from Headless with the classes fixed inset-0 bg-stone-600/30 backdrop-blur-sm to create a semi-transparent backdrop that blurs the underlying content.
Transitions: DialogPanel component uses the classes transition duration-300 ease-out data-[closed]:opacity-0 to create fade in/out transitions for the dialog window.

Here is the code:

import { FC, ReactNode } from 'react';
import {
  Dialog,
  DialogPanel,
  DialogTitle,
  DialogBackdrop,
} from '@headlessui/react';
import classNames from 'classnames';

export type Props = {
  title?: string;
  children: ReactNode;
  open?: boolean;
  onClose?: () => void;
};

export const TableDialog: FC<Props> = ({
  title,
  children,
  open = false,
  onClose = () => {},
}) => {
  return (
    <Dialog
      open={open}
      as="div"
      className="relative z-50 focus:outline-none"
      onClose={onClose}
    >
      {/* Create a backdrop */}
      <DialogBackdrop className="..." />
      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div className="flex min-h-full items-center justify-center">
          <DialogPanel
            // required to enable transition
            transition
            className={classNames(
              // Tailwind classes
              // ...
            )}
          >
            {title && (
              <DialogTitle
                title={title}
                as="h3"
              >
                {title}
              </DialogTitle>
            )}
            {children}
          </DialogPanel>
        </div>
      </div>
    </Dialog>
  );
};

Filter Dialog User eXperience

To implement modal component logic, we have to implement manageable state for the column filter dialog.

The hook, located at src/DataTable/features/useFilterDialogState.ts, is responsible for controlling the Filter Dialog state. It has two distinct React states: one to track whether the dialog is open or closed, and another to store the ID of the currently selected column. This separation enables the openDialog function to effectively handle both actions: opening the dialog and recording the selected column's ID for subsequent filtering operations.

import { useState, useCallback } from 'react';

export const useFilterDialogState = () => {
  const [open, setOpen] = useState(false);
  const [columnId, setColumnId] = useState<string>();

  const openDialog = useCallback((selectedId: string) => {
    setColumnId(selectedId);
    setOpen(true);
  }, []);

  const closeDialog = useCallback(() => {
    setOpen(false);
  }, []);

  return { openDialog, isOpen: open, closeDialog, selectedId: columnId };
};

This hook will be placed within the src/DataTable/DataTable.tsx component. We'll save the openDialog callback into the TanStack Table Meta configuration, following the same approach we used for the locale setting.

const DataTable: FC<Props> = ({ tableData, locale = 'en-US' }) => {

  // Initialize filter dialog state
  const {
    openDialog: openFilterDialog,
    isOpen,
    closeDialog,
    selectedId,
  } = useFilterDialogState();

  const table = useReactTable({
    meta: {
      openFilterDialog,
      //...
    },
    //...
   }
  //..
  return (
    <Fragment>
      <FilterDialog
        selectedColumn={selectedId}
        isOpen={isOpen}
        onClose={closeDialog}
        tableContext={table}
      />
      {/*...*/}
    </Fragment>
}

We extend src/DataTable/declarations.d.ts:

import '@tanstack/react-table';
import { Row } from './types.ts';

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends Row> {
     openFilterDialog: (columnId: string) => void;
     //...
  }
  //...
}

We can now programmatically control the Filter Dialog by invoking callbacks to open and close it manually. Finally, we'll integrate a filter action into our menu. This involves calling the openFilterDialog function previously defined within the Table Meta configuration.

export const useColumnActions = (
  context: HeaderContext<Row, unknown>,
): ColumnAction[] => {
  //...

  // Get column filter state using TanStack table API
  const isFiltered = context.column.getIsFiltered();

  return useMemo<ColumnAction[]>(
    () => [
      //...
      {
        label: !isFiltered ? 'Apply filter' : 'Edit/Remove filter',
        icon: <Icon name="funnel" className="text-lg" />,
        onClick: () => {
          context.table.options.meta?.openFilterDialog(context.column.id);
        },
      },
    ],
    [context.column, context.table, isFiltered, isPinned, isSorted],
  );
};

Create inputs

Previously, we created 4 different Content types:

enum ContentTypes {
  Text = 'Text',
  Number = 'Number',
  Date = 'Date',
  Country = 'Country',
}

Now we'll support each of them with the relevant input to capture user filter values.

We are going to create 4 different input field components in the src/DataTable/inputs folder.

Input component interface

label: A string representing the text label displayed above the input field.
className: An optional string for applying custom CSS classes to the component.
placeholder: An optional string providing a text hint to the user within the input field.
value: An optional property representing the current value of the filter.
onChange: A function that handles changes to the input field's value.
icon: An optional string specifying the name of the icon to be displayed to the left of the input field.

Text input

Here is the TextInput component code. Headless Field, Input, and Label, components are used to ensure accessibility requirements are met.

import { FC, useCallback, ChangeEvent } from 'react';
import { Field, Input, Label } from '@headlessui/react';
import classNames from 'classnames';
import { Icon } from '../../Icon.tsx';

export const TextField: FC<Props> = ({
  label,
  className,
  placeholder,
  value,
  onChange,
  icon = 'text-t',
}) => {
  const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      onChange(event.target.value);
    },
    [onChange],
  );
  return (
    <Field className="flex flex-col gap-1.5">
      <Label
        className={classNames(
          'text-white/70 cursor-pointer text-sm font-semibold ',
        )}
      >
        {label}
      </Label>
      <div className="flex flex-row items-center gap-2">
        <Icon
          name={icon}
          className="shrink-0 text-2xl text-white/80"
          variant="fill"
        />
        <Input
          onChange={handleChange}
          value={value}
          type="text"
          placeholder={placeholder}
          className={classNames(
            // Tailwind classes
            className,
          )}
        />
      </div>
    </Field>
  );
};

Numeric input

Similar to Text input, Numeric input utilizes the Headless UI Input component, with some adjustments for number display and basic validation.

Display: Tailwind classes text-right tabular-nums are applied to align numbers to the right and enhance their visual presentation in tables.
Validation: The pattern attribute is used to restrict user input to valid decimal numbers. The provided pattern [+-]?(?:0|[1-9]\d*)(?:\.\d+)?" allows positive, negative numbers, zero, and decimals. This article explains the topic in detail.

Date input

Date input expects the value to be a valid Date ISO string. We set the type attribute of HTMLInputComponent to date and utilize event.target.valueAsDate property to capture input value as a Date object.

To be able to display selected date, we need to format our ISO string value into yyyy-mm-dd format.

Here is how to do it. Notice, that we are reversing date formatted using hardcoded en-GB locale, which is dd/mm/yyyy.

const value = valueProp
    ? new Date(valueProp)
        .toLocaleDateString('en-GB')
        .split('/')
        .reverse()
        .join('-')
    : '';

Combo input

For the Country content type, we'll pick a Headless UI Combobox input due to its suitability for handling enumerable data like a limited list of countries.

The code is located at src/DataTable/inputs/ComboField.tsx.

Here is the demo of country selection:

To have a full list of country names linked to the country codes, we are storing in the table, we are going to create a locale-aware mocking function src/mocks/createCountryList.ts:

import { countryCodes } from './countryCodes.ts';

export const createCountryList = (locale = 'en-US') =>
  countryCodes
    .map((code) => ({
      value: code,
      // use a standard browser built-in object to get
      // a locale-aware country name from region code
      label: new Intl.DisplayNames(locale, { type: 'region' }).of(code) || '',
    }))
    .sort(({ label: leftLabel }, { label: rightLabel }) =>
      // use a standard browser built-in object to compare country names
      new Intl.Collator(locale).compare(leftLabel, rightLabel),
    );

Input composition

The currently visible input type now depends on the selected column content type.

const filterInput = useMemo(() => {
    const countryOptions = createCountryList(tableContext.options.meta?.locale);
    return selectedColumn
      ? {
          [ContentTypes.Text]: (
            <TextField
              label="Cell contains:"
              placeholder="Enter text (case insensitive)"
              onChange={setNextFilterValue}
              value={nextFilterValue as string}
            />
          ),
          [ContentTypes.Number]: (
            <NumericField
              label="Number is bigger than:"
              placeholder="-123.456"
              onChange={setNextFilterValue}
              value={nextFilterValue as string}
            />
          ),
          [ContentTypes.Date]: (
            <DateField
              label="Filter dates after:"
              placeholder="Pick date"
              onChange={setNextFilterValue}
              value={nextFilterValue as string}
            />
          ),
          [ContentTypes.Country]: (
            <ComboField
              value={nextFilterValue as string}
              icon="globe-stand"
              options={countryOptions}
              label="Select country"
              placeholder="Start typing or expand"
              onChange={setNextFilterValue}
            />
          ),
        }[selectedColumn.contentType]
      : null;
  }, [nextFilterValue, selectedColumn, tableContext.options.meta?.locale]);

Button component

We also need a basic button to capture user clicks. The component (src/DataTable/inputs/Button.tsx) needs to support a disabled state. This is because we want to prevent users from setting an empty filter and instead encourage them to use a reset function.

We'll use Headless Button and use Tailwind disabled: helper to manage styles.

Apply and reset filter(s)

The filtering feature requires a list of columns that can be filtered. Not all columns may be filterable (we'll explore this further in next chapters).

The src/DataTable/features/useFilterableColumns.ts hook retrieves the table's column configuration using the TanStack Table API. It then transforms this raw column data into a new array specifically designed for the Filter Dialog. This array contains only the necessary information for each filterable column. Finally, the hook removes any columns from the array where filtering is explicitly disabled, as well as the filterable prop itself.

import { Table } from '@tanstack/react-table';
import { useMemo } from 'react';
import { Row, ContentTypes } from '../types.ts';

/**
 * Column definition to use in Dialogs
 */
export type Column = {
  id: string;
  title: string;
  contentType: keyof typeof ContentTypes;
};

export const useFilterableColumns = (table: Table<Row>): Column[] => {
  return useMemo(
    () =>
      table
        .getAllColumns()
        .map((column) => {
          return {
            title: column.columnDef.meta?.title as string,
            contentType: column.columnDef.meta
              ?.contentType as keyof typeof ContentTypes,
            id: column.id,
            filterable: column?.getCanFilter(),
            filterValue: column?.getFilterValue(),
          };
        })
        // 
        .filter(({ filterable }) => filterable)
        .map(({ filterable, ...restProps }) => ({
          ...restProps,
        })),
    [table],
  );
};

The src/DataTable/dialogs/FilterDialog.tsx component implements the following filtering logic. It obtains a list of all filterable columns by utilizing the useFilterableColumns.ts hook. The component determines the currently selected column from the list of available filterable columns. The current filter value for the selected column is retrieved using the TanStack Table API. A state variable is created to capture the next filter value. An effect is implemented to ensure that the state variable remains synchronized with the selectedColumn prop, effectively updating the filter value whenever the selected column changes

export const FilterDialog: FC<Props> = ({
  isOpen,
  selectedColumn: selectedColumnProp,
  onClose = () => {},
  tableContext,
}) => {
  const columns = useFilterableColumns(tableContext);

  const selectedColumn = useMemo(
    () => columns.find(({ id }) => id === selectedColumnProp),
    [columns, selectedColumnProp],
  );

  const filterValue =
    selectedColumnProp &&
    (tableContext.getColumn(selectedColumnProp)?.getFilterValue() as
      | string
      | undefined);

  const [nextFilterValue, setNextFilterValue] = useState<string>('');

  useEffect(() => {
    setNextFilterValue(filterValue || '');
  }, [
    filterValue,
    // This dependency ensures that the state is cleared after Dialog dismissed
    selectedColumn,
  ]);
  //...
}

We bind set and reset functions to the corresponding Filter Dialog buttons.

const handleReset = useCallback(() => {
  tableContext.getColumn(selectedColumnProp as string)?.setFilterValue('');
  onClose();
}, [onClose, selectedColumnProp, tableContext]);

const handleSetFilter = useCallback(() => {
  tableContext
    .getColumn(selectedColumnProp as string)
    ?.setFilterValue(nextFilterValue);
  onClose();
}, [nextFilterValue, onClose, selectedColumnProp, tableContext]);

Implement data filtering

TanStack Table offers extensive Filtering API support.

To enable data filtering, you need to extend the column definitions in src/DataTable/columnsConfig.tsx with the filterFn property. This property specifies the filter function to be applied to the column data. You can choose from TanStack built-in functions or create our own

includesString for Text content type (built-in function).
isBiggerNumber for Number content type (custom function).
isAfterDate for Date content type (custom function).

Custom filters

We put custom filter functions inside src/DataTable/features/filterFns.ts.

import { FilterFn } from '@tanstack/react-table';

import { Row } from '../types.ts';

export const isBiggerNumber: FilterFn<Row[]> = (
  row,
  columnId,
  filterValue: number,
) => {
  return row.getValue<number>(columnId) > filterValue;
};

export const isAfterDate: FilterFn<Row[]> = (
  row,
  columnId,
  filterValue: Date,
) => {
  const cellDate = new Date(row.getValue(columnId));
  return cellDate.getTime() > filterValue.getTime();
};

isAfterDate.resolveFilterValue = (filterValue) => {
  return new Date(filterValue);
};

Apply Filtered Row Model

Next step, we import and apply the Filtered Row Model to the table, register custom filter functions and initialize the Filter Dialog state.

import {
  getFilteredRowModel,
} from '@tanstack/react-table';
import { useFilterDialogState } from './features/useFilterDialogState.ts';
import { isBiggerNumber, isAfterDate } from './features/filterFns.ts';

const DataTable: FC<Props> = ({ tableData, locale = 'en-US' }) => {
  // ...

  const {
    openDialog: openFilterDialog,
    isOpen,
    closeDialog,
    selectedId,
  } = useFilterDialogState();

  const table = useReactTable({
    meta: {
      // save reference for open filter dialog callback
      openFilterDialog,
    },
    getFilteredRowModel: getFilteredRowModel(),
    filterFns: {
      // set the custom filter function for numeric content
      isBiggerNumber,
      // set the custom filter function for dates
      isAfterDate
    },
    //...
  });
  return (
    <Fragment>
     <FilterDialog
        selectedColumn={selectedId}
        isOpen={isOpen}
        onClose={closeDialog}
        tableContext={table}
      />
     {/*...*/}
    </Fragment>
  )
}

Style filtered cells

We have to conditionally change the style of filtered cells, making them more visible.

<td
  key={cell.id}
  className={classNames(
    // ... rest classes
    {
      'font-normal': !cell.column.getIsFiltered(),
      'font-semibold italic': cell.column.getIsFiltered(),
    },
  )}
>
  {flexRender(
    cell.column.columnDef.cell,
    cell.getContext(),
  )}
</td>

Handle no results

Sometimes the filtering will provide an empty result to the user. We can handle this case by showing warning and button to reset filters.


const handleResetFilters = useCallback(() => {
  table.resetColumnFilters();
}, [table]);

// ...

return (
  <Fragment>
    {/*...*/}
    {rows.length === 0 && (
      <div className="flex items-center justify-center gap-3 p-3 font-medium">
        <div>No data to render.</div>
          <Button
            icon="funnel-x"
            title="Reset all filters"
            onClick={handleResetFilters}
          />
        </div>
    )}
  </Fragment>
)

Mouse over row highlight

The last step of this exercise will be adding the highlight to table rows when the user is hovering them. This enhancement aims to further improve our table focusing capabilities.
Here is the demo.

We implement this feature using the Tailwind group: helper, which translates parent states to children.

<tr className="group">
  <td className="group-hover:!bg-cyan-100" />
</tr>

Demo

Here is a working demo of this exercise.

Next: Dark theme and refactoring

DEV Community: Dima Vyshniakov

Data Table From Scratch. Part 9: Delete Rows

Implement row deletion logic

deleteRows function

Integrate hook to DataTable component

Create deletion UI

Connect DeleteDialog with DataTable

Demo

How to prove Gödel’s Second Incompleteness Theorem using TypeScript

Intro

Definition

Recap

Modus ponens explanation

Implement consistency

Self-referential consistency statement

Proof

How to prove Gödel’s First Incompleteness Theorem using Typescript

Define a statement

Build a formal system

Check provability

Create unprovable statement

How to validate user input in Koval UI

Koval UI validation principles

Attribute-based validation

Required inputs

Validate pattern

Set minimum and maximum length

Customize error message

Custom validation with callback function

Asynchronous validation

Conditional validation

Password validation example

From scratch: Build a CSS Animated React Carousel Component

Carousel architecture

.carousel

.scene

.viewport

.cell-x

Positioning cells

Adjusting rotation

Apply translate

Making React component

Component interface

Implement rotation hook

Use rotation state in Carousel

Make carousel cells

Add navigation and exposed mode

Make carousel responsive

Demo

Data Table From Scratch. Part 8: Select rows

Enable row selection

Create selection UI

Add selection column

Checkbox

Selection info panel

Exclude rows from selection

Demo

How to build a tree-shakable library with Vite and Rollup

Build as a single file

Build as multiple files

Bundle size impact

Use library template

Let's create international phone number input with React, Tailwind CSS and Headless UI

Create a phone field set

Country codes configuration

Phone number input

Phone input masking

Country code selection input

Handle country selection

Filter country list

Working demo

How to create a fancy Link-in-Bio page in less than 5 minutes

Quick deployment

Fill your info

Add contact links

Attach vCard file

Deploy website

Set up analytics

Custom domain

How to detect touch devices using browser media queries

`deleteRows` function

Integrate hook to `DataTable` component

Connect `DeleteDialog` with `DataTable`

`.carousel`

`.scene`

`.viewport`

`.cell-x`

`pointer` media query

`useMatchMedia` hook

Reusable `TableDialog` component