Forem: Yanger Rai

Expand Tanstack Table Row to display non-uniform data

Yanger Rai — Thu, 04 Jul 2024 21:13:26 +0000

You can expand row in Tanstack Table using getCanExpand api as long as the row and sub rows data are uniform in structure.

"But what if you want to show non-uniform data in the sub row?"
That is exactly what we will achieve today. 😃 🌀

Still, if your use case is the later, you can follow tanstack example here to achieve it.

Lets begin!🚀

The complete code implementation can be found here, you can follow along.

We will make use of getIsExpanded api which is suitable for our use case.

For this tutorial, the table row object look like this; amount, status and email are the table column, the rest will be displayed in the expanded row:

 {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "m@example.com",
      date: "2023-07-01",
      method: "credit_card",
      description: "Payment for subscription",
      transactionId: "TXN728ED52F",
 },

Step 1:

Begin by defining the column, add a click handler and use getIsExpanded to get the expanded state of the row.

export const columns: ColumnDef<Payment>[] = [
  // this handle the row expands
  {
    id: "select",
    cell: ({ row }) => (
      <button onClick={() => row.toggleExpanded()}>
        {row.getIsExpanded() ? <CircleChevronDown /> : <CircleChevronUp />}
      </button>
    ),
  },
  //rest of the table columns
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
];

Step 2:

Defined your data table component. We will use getIsExanded api to get the state of row that is expanded and render rest of the data inside the table cell.


export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  //define the expanded state
  const [expanded, setExpanded] = useState<ExpandedState>({});

  const table = useReactTable({
   //.. rest of the code
    onExpandedChange: setExpanded,
    getExpandedRowModel: getExpandedRowModel(),
    state: {
      expanded,
    },
  });

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          //.. rest of the code
        </TableHeader>

        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <>
              {/* this render the main columns */}
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  //.. rest of the code
                </TableRow>
                {/* this render the expanded row */}
                {row.getIsExpanded() && (
                  <TableRow>
                    <TableCell colSpan={columns.length} className="h-24">
                      {/* You can create a seperate component to display the expanded data */}
                      <div className="grid px-10">
                        <h2 className=" font-bold">More Details</h2>
                        <p>
                          Transaction Id:{" "}
                          <span className=" text-slate-500">
                            {row.original.transactionId}
                          </span>
                        </p>
                        <p>
                          Transaction Date:{" "}
                          <span className=" text-slate-500">
                            {row.original.date}
                          </span>
                        </p>
                        <p>
                          Transaction Method:{" "}
                          <span className=" text-slate-500">
                            {row.original.method}
                          </span>
                        </p>
                        <p>
                          Description:{" "}
                          <span className=" text-slate-500">
                            {row.original.description}
                          </span>
                        </p>
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

and you should be able to take it from here, incase you missed it, you will find the complete code here. Do give a star 😊

Thanks for dropping by 🌟
Add a ❤️ if you liked it.

Effortless Row Deletion - Tanstack Table (shadcn UI version)

Yanger Rai — Mon, 14 Aug 2023 18:44:53 +0000

In the world of UI design, we're often drawn to the allure of sleek interfaces and smooth interactions. Shadcn UI, a favorite among many, has made its mark in the realm of visual aesthetics.

I have been having a blast using it in my project building dashboards. For my table needs, I turned to the tried-and-true code from the Task Example.

How to delete a row or rows from the table?

The challenge was clear: I wanted the power to delete rows with minimal clutter. The solution lay in simplicity – a single button capable of removing one or more rows at once. Whether you're following the Task Example or charting your own course, the method remains as accessible as ever.

If you are also following the code structure from the above task example, you can follow the example below even if you're not, you can use twerk to meet your requirement. shadcn code repo

Step 1: The Magical Prop

First, we must pass a prop to the data-table component – a state setter function. Think of it as a conduit for gathering selected row data. Imagine, with just a few lines of code, we could have this powerful ability at our fingertips.

pass the selected row data to the state setter function using useEffect().

In the example above, I extracted the _id (an essential piece of information for my MongoDB needs), but feel free to tailor the code to your unique requirements.

Step 2: An Invitation to the Future

Let's continue our journey by passing this prop from the parent component. In the heart of your application, where the "DataTable" is imported, you'll find yourself initializing a state const [selectedRows, setSelectedRows] = useState([])to house the selected rows' data. This state's setter function will become your guiding light.

Step 3: The Grand Reveal

As you tie the pieces together, you'll witness the transformation before your eyes. Rows selected with a click, a button's gentle promise of deletion, and the streamlining of your user experience. With a touch of elegance, your interface embraces efficiency and clarity.

Conclusion

As you delve into the world of streamlined table interactions, I hope this guide proves to be a guiding light for you. Embrace the elegance of the tanstack table's hidden prowess – the ability to delete rows effortlessly with a single click. Just as I've shared my insights, I invite you to contribute your own wisdom. If you're privy to even more effective methods for row deletion, don't hesitate to share in the comments below. After all, the journey of learning and growth is one we embark upon together, and every insight adds to our collective mastery. Happy coding, and let's keep exploring new horizons!

Use Square Bracket Notation for headache-free coding

Yanger Rai — Fri, 11 Aug 2023 11:46:53 +0000

Ok! So this happened! I failed an interview because I overlooked the basic!

There are two ways to access property values of an object in javascript:

Dot notation ( user.name )
Square Bracket notation ( user["name"])

And most of the time, property names are known and simple and dot notation comes naturally to many of us.

But there is a catch. Read on!

Objects

TL;TR -

Square bracket notation saved you from breaking your head compared to dot notation.
When you defined a key into a variable and wants to add it as new property into an object, it will only work if square bracket notation is used.
let user = {
  name: "John",
  age: 30
};
let key = "gender";
user.key = "male";
alert( user.gender ) // undefined
user[key] = "male";
alert( user.gender ) // male

Use dot notation:When an object is already defined and you just want to read the property provided all property are single word.
Single word: "name"

Avoid dot notation:When an object is already defined and you just want to read the property but few or all property are multiword.
multiword: "first name"

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be  quoted
};

user.likes birds = true // this would give a syntax error

Use square bracket notation:
I mean in all case (at least from what I know, feel free to comment )

few examples: Works for all operators like charm

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Avoid square bracket notation:

Guess we'll never know....