Tanstack Table: Clickable Row Except for 2 Columns – A Step-by-Step Guide

Are you tired of dealing with clunky table rows that can’t be clicked? Do you want to create a seamless user experience for your users? Look no further! In this article, we’ll dive into the world of Tanstack Table and explore how to create a clickable row, except for 2 columns. Buckle up, folks, and let’s get started!

What is Tanstack Table?

Tanstack Table is a powerful, open-source library for building data tables in React. It provides a wide range of features, including filtering, sorting, and selection, making it a popular choice among developers. With Tanstack Table, you can create complex data tables with ease, and that’s exactly what we’ll be doing today!

Why Make Rows Clickable?

Clickable rows can greatly enhance the user experience of your table. Imagine being able to select a row with a single click, rather than having to click on a checkbox or radio button. It’s a small change that can make a big difference in the overall usability of your application.

But what if you want to exclude certain columns from being clickable? That’s where things get interesting. In this article, we’ll show you how to make rows clickable, except for 2 columns. Sounds challenging? Fear not, dear reader, for we’ve got you covered!

Prerequisites

Before we dive into the code, make sure you have the following installed:

• Node.js (version 14 or higher)
• React (version 17 or higher)
• Tanstack Table (version 8 or higher)

Step 1: Set Up Your Project

Create a new React project using your favorite method (e.g., create-react-app). Then, install Tanstack Table using npm or yarn:

npm install @tanstack/table

Now, create a new component for your table:

import React from 'react';
import { Table } from '@tanstack/table';

const MyTable = () => {
  return (
    
      {/* table content will go here */}
    
  );
};

export default MyTable;

Step 2: Define Your Table Schema

Next, define your table schema using the `columns` prop:

import React from 'react';
import { Table } from '@tanstack/table';

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'name',
    header: 'Name',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'email',
    header: 'Email',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'phone',
    header: 'Phone',
    cell: (info) => info.value,
  },
];

const MyTable = () => {
  return (
    
      {/* table content will go here */}
    
  );
};

export default MyTable;

In this example, we’ve defined four columns: `id`, `name`, `email`, and `phone`. These columns will make up our table header.

Step 3: Make Rows Clickable

To make rows clickable, we’ll use the `rowProps` prop to add an `onClick` event handler:

const MyTable = () => {
  return (
     ({
        onClick: () => console.log(`Row ${row.id} clicked!`),
      })}
    >
      {/* table content will go here */}
    
  );
};

In this example, we’ve added an `onClick` event handler to each row using the `rowProps` prop. When a row is clicked, the `console.log` statement will execute, logging the row’s ID to the console.

Step 4: Exclude Columns from Being Clickable

Now, let’s exclude the `email` and `phone` columns from being clickable. We can do this by adding a conditional statement to our `rowProps` prop:

const MyTable = () => {
  return (
     {
        if (column.accessorKey === 'email' || column.accessorKey === 'phone') {
          return {};
        }
        return {
          onClick: () => console.log(`Row ${row.id} clicked!`),
        };
      }}
    >
      {/* table content will go here */}
    
  );
};

In this example, we’ve added a conditional statement to our `rowProps` prop. If the current column is either `email` or `phone`, an empty object is returned, effectively disabling the click event for those columns. Otherwise, the `onClick` event handler is added to the row.

Step 5: Add Table Data

Finally, let’s add some sample data to our table:

const data = [
  {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
    phone: '123-456-7890',
  },
  {
    id: 2,
    name: 'Jane Doe',
    email: 'jane@example.com',
    phone: '098-765-4321',
  },
  {
    id: 3,
    name: 'Bob Smith',
    email: 'bob@example.com',
    phone: '555-123-4567',
  },
];

const MyTable = () => {
  return (
     {
        if (column.accessorKey === 'email' || column.accessorKey === 'phone') {
          return {};
        }
        return {
          onClick: () => console.log(`Row ${row.id} clicked!`),
        };
      }}
    >
      
      
    
  );
};

In this example, we’ve added an array of objects to our `data` prop. Each object represents a row in our table, with properties for `id`, `name`, `email`, and `phone`. We’ve also added the `Table.Header` and `Table.Body` components to render our table header and body, respectively.

Conclusion

And that’s it! You now have a Tanstack Table with clickable rows, except for 2 columns. Pat yourself on the back, developer! You’ve accomplished something truly remarkable.

Remember, the key to making rows clickable is to use the `rowProps` prop and add an `onClick` event handler. To exclude columns from being clickable, simply add a conditional statement to your `rowProps` prop.

With Tanstack Table, the possibilities are endless. Whether you’re building a simple data table or a complex, interactive dashboard, Tanstack Table has got you covered.

Final Code

import React from 'react';
import { Table } from '@tanstack/table';

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'name',
    header: 'Name',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'email',
    header: 'Email',
    cell: (info) => info.value,
  },
  {
    accessorKey: 'phone',
    header: 'Phone',
    cell: (info) => info.value,
  },
];

const data = [
  {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
    phone: '123-456-7890',
  },
  {
    id: 2,
    name: 'Jane Doe',
    email: 'jane@example.com',
    phone: '098-765-4321',
  },
  {
    id: 3,
    name: 'Bob Smith',
    email: 'bob@example.com',
    phone: '555-123-4567',
  },
];

const MyTable = () => {
  return (
     {
        if (column.accessorKey === 'email' || column.accessorKey === 'phone') {
          return {};
        }
        return {
          onClick: () => console.log(`Row ${row.id} clicked!`),
        };
      }}
    >
      
      
    
  );
};

export default MyTable;

That’s it for today, folks! We hope you enjoyed this article on creating a Tanstack Table with clickable rows, except for 2 columns. Happy coding, and don’t forget to check out our other articles for more React-related goodness!

Here is the output:

Frequently Asked Questions

Get answers to your burning questions about Tanstack Table: Clickable row except for 2 columns