Delete/Edit Rows in TanStack Table

[mike15395]

I want delete and edit funtionality in my tanstack table. Which built in functions should i use ? I was not able to find anything related to deleting rows in the official tanstack docs. I am new to TS and tanstack so Please help me out.

I am sharing my code.
Here basically i am fetching data from api and displaying it in tanstack table. I want to add delete/edit functionality to each row.(for styling i am using material ui table).

import { useQuery } from "@tanstack/react-query";
import { styled } from "@mui/material/styles";
import MTable from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import {
  Column,
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  SortingState,
  Table,
  useReactTable,
} from "@tanstack/react-table";

import axios from "axios";
import React from "react";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 18,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  // hide last border
  "&:last-child td, &:last-child th": {
    border: 2,
  },
}));

type Todo = {
  userId: number;
  title: string;
  id: number;
  completed: boolean;
};

export type PaginationTableState = {
  pagination: PaginationState;
};

export type PaginationState = {
  pageIndex: 0;
  pageSize: 10;
};

const columns: ColumnDef<Todo>[] = [
  {
    accessorKey: "userId",
    cell: (info) => info.getValue(),
    header: () => "User Id",
  },
  {
    accessorKey: "id",
    cell: (info) => info.getValue(),
    header: () => "Id",
  },
  {
    accessorKey: "title",
    cell: (info) => info.getValue(),
    header: () => "Title",
  },
  {
    accessorKey: "completed",
    cell: (info) => `${info.getValue()}`,
    header: () => "Completed",
  },
];

function TableTest() {
  const [sorting, setSorting] = React.useState<SortingState>([]);

  const getTodos = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/"
    );
    console.log(response.data);

    if (response) {
      return response.data;
    }
  };

  const { isLoading, data, error } = useQuery(["getTodos"], getTodos);
  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
  if (isLoading) return "Loading...";
  if (error) return "Some error occurred";

  return (
    <div className="container mx-auto p-2 mt-5 text-xl font-sans">
      <div />
      {/* pagination buttons and dropdown */}
      <div className="flex items-center justify-end gap-2 ml-5 mb-5">
        <button
          className="border rounded p-1"
          onClick={() => table.setPageIndex(0)}
          disabled={!table.getCanPreviousPage()}
        >
          {"<<"}
        </button>
        <button
          className="border rounded p-1"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          {"<"}
        </button>

        <span className="flex items-center gap-1">
          <div>Page</div>
          <strong>
            {table.getState().pagination.pageIndex + 1} of{" "}
            {table.getPageCount()}
          </strong>
        </span>

        <button
          className="border rounded p-1"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          {">"}
        </button>
        <button
          className="border rounded p-1"
          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
          disabled={!table.getCanNextPage()}
        >
          {">>"}
        </button>

        <select
          className="p-3"
          value={table.getState().pagination.pageSize}
          onChange={(e) => {
            table.setPageSize(Number(e.target.value));
          }}
        >
          {[10, 20, 30, 40, 50].map((pageSize) => (
            <option key={pageSize} value={pageSize}>
              {pageSize}
            </option>
          ))}
        </select>
      </div>
      <div>
        <h1 className="text-center text-blue-800 text-4xl">
          Sample Data into Tanstack Table
        </h1>
        {/* table  */}
        <TableContainer component={Paper}>
          <MTable aria-label="customized table">
            <table>
              <TableHead>
                <TableRow>
                  <thead>
                    {table.getHeaderGroups().map((headerGroup) => (
                      <tr key={headerGroup.id}>
                        {headerGroup.headers.map((header) => {
                          return (
                            <StyledTableCell>
                              <th key={header.id} colSpan={header.colSpan}>
                                {header.isPlaceholder ? null : (
                                  <div
                                    {...{
                                      className: header.column.getCanSort()
                                        ? "cursor-pointer select-none"
                                        : "",
                                      onClick:
                                        header.column.getToggleSortingHandler(),
                                    }}
                                  >
                                    {flexRender(
                                      header.column.columnDef.header,
                                      header.getContext()
                                    )}
                                    {{
                                      asc: " 🔼",
                                      desc: " 🔽",
                                    }[header.column.getIsSorted() as string] ??
                                      null}

                                    {header.column.getCanFilter() ? (
                                      <div>
                                        <Filter
                                          column={header.column}
                                          table={table}
                                        />
                                      </div>
                                    ) : null}
                                  </div>
                                )}
                              </th>
                            </StyledTableCell>
                          );
                        })}
                      </tr>
                    ))}
                  </thead>
                </TableRow>
              </TableHead>
              <TableBody>
                <tbody>
                  {table.getRowModel().rows.map((row) => (
                    <StyledTableRow>
                      <tr key={row.id} className="flex space-x-4">
                        {row.getVisibleCells().map((cell: any) => (
                          <StyledTableCell align="center">
                            <td key={cell.id}>
                              {flexRender(
                                cell.column.columnDef.cell,
                                cell.getContext()
                              )}
                            </td>
                          </StyledTableCell>
                        ))}
                      </tr>
                    </StyledTableRow>
                  ))}
                </tbody>
              </TableBody>
            </table>
          </MTable>
        </TableContainer>
      </div>
    </div>
  );
}
// filter function to sort the data in ascending or descending order
function Filter({
  column,
  table,
}: {
  column: Column<any, any>;
  table: Table<any>;
}) {
  // the first value in each column
  const firstValue = table
    .getPreFilteredRowModel()
    .flatRows[0]?.getValue(column.id);

  const columnFilterValue = column.getFilterValue();
  // input type is number if first value is number else it is text input
  return typeof firstValue === "number" ? (
    <div className="flex space-x-2">
      <input
        type="number"
        value={(columnFilterValue as [number, number])?.[0] ?? ""}
        onChange={(e) =>
          column.setFilterValue((old: [number, number]) => [
            e.target.value,
            old?.[1],
          ])
        }
        placeholder={`Min`}
        className="w-16 border shadow rounded"
      />
      <input
        type="number"
        value={(columnFilterValue as [number, number])?.[1] ?? ""}
        onChange={(e) =>
          column.setFilterValue((old: [number, number]) => [
            old?.[0],
            e.target.value,
          ])
        }
        placeholder={`Max`}
        className="w-16 h-8 border shadow rounded"
      />
    </div>
  ) : (
    <input
      type="text"
      value={(columnFilterValue ?? "") as string}
      onChange={(e) => column.setFilterValue(e.target.value)}
      placeholder={`Search...`}
      className="w-48 h-8 border shadow rounded"
    />
  );
}
export default TableTest;

[gmwill934]

Did you found a solution?

[RossCoeH]

Given you are using Material UI, then I suggest you look at https://github.com/kevinvandy/material-react-table - either for direct use, or for inspiration - good examples implementing react-table with editing etc.