how to expand row and trigger independent expandable action button in same row onClick action button

[johirhaquedipok]

I want each action button will have it's own expandable independent row. I'm using Tanstack Table v8. But the problem is, if I click on any expandable button in a row that trigger all expandable buttons in the same row. I don't want that. Each action will trigger on it's own and expand a row with new data.

Whatever I've tried so far is in this codeSandbox

And also, here is the code

 {
   firstName: "Marquis",
   lastName: "Runolfsdottir",
   age: 36,
   visits: 322,
   progress: 46,
   status: "single",
 },
 {
   firstName: "Hayden",
   lastName: "Ritchie",
   age: 35,
   visits: 208,
   progress: 79,
   status: "relationship",
 }]
 

 const expandableColumn = [
 {
   accessorKey: "firstName",
   header: "First Name",
   cell: ({ row, getValue }) => (
     <div
       style={{
         // Since rows are flattened by default,
         // we can use the row.depth property
         // and paddingLeft to visually indicate the depth
         // of the row
         paddingLeft: `${row.depth * 2}rem`,
       }}
     >
       {row.getCanExpand() ? (
         <button
           {...{
             onClick: row.getToggleExpandedHandler(),
             style: { cursor: "pointer" },
           }}
         >
           {row.getIsExpanded() ? "👇" : "👉"}
         </button>
       ) : (
         "🔵"
       )}
       {getValue<string>()}
     </div>
   ),
   footer: (props) => props.column.id,
 },
 {
   accessorFn: (row) => row.lastName,
   id: "lastName",
   cell: ({ row, getValue }) => (
     <div
       style={{
         // Since rows are flattened by default,
         // we can use the row.depth property
         // and paddingLeft to visually indicate the depth
         // of the row
         paddingLeft: `${row.depth * 2}rem`,
       }}
     >
       {row.getCanExpand() ? (
         <button
           {...{
             onClick: row.getToggleExpandedHandler(),
             style: { cursor: "pointer" },
           }}
         >
           {row.getIsExpanded() ? "♟" : "🔦"}
         </button>
       ) : (
         "🔵"
       )}
       {getValue<string>()}
     </div>
   ),
   header: () => <span>Last Name</span>,
   footer: (props) => props.column.id,
 },
 {
   accessorKey: "age",
   header: () => "Age",
   footer: (props) => props.column.id,
 },
 {
   accessorKey: "visits",
   header: () => <span>Visits</span>,
   footer: (props) => props.column.id,
 },
 {
   accessorKey: "status",
   header: "Status",
   footer: (props) => props.column.id,
 },
 {
   accessorKey: "progress",
   header: "Profile Progress",
   footer: (props) => props.column.id,
 },
];

import "./styles.css";
import {
 ColumnDef,
 ColumnFiltersState,
 SortingState,
 VisibilityState,
 flexRender,
 getCoreRowModel,
 getExpandedRowModel,
 getFacetedRowModel,
 getFacetedUniqueValues,
 getFilteredRowModel,
 getPaginationRowModel,
 getSortedRowModel,
 useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";

import { expandableColumn, expandableData } from "./column-data";

interface DataTableProps<TData, TValue> {
 columns: ColumnDef<TData, TValue>[];
 data: TData[];
 renderSubComponent: (props: { row: Row<TData> }) => React.ReactElement;
 getRowCanExpand: (row: Row<TData>) => boolean;
}

const renderSubComponent = ({ row }: { row: Row<Person> }) => {
 return (
   <pre style={{ fontSize: "10px" }}>
     <code>{JSON.stringify(row.original, null, 2)}</code>
   </pre>
 );
};

export function ExpandableTable<TData, TValue>({
 columns,
 data,
 renderSubComponent,
 getRowCanExpand,
}: DataTableProps<TData, TValue>) {
 const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});

 const table = useReactTable({
   data,
   columns,
   getRowCanExpand,
   state: {
     columnVisibility,
   },
   autoResetPageIndex: false,
   enableRowSelection: true,
   onColumnVisibilityChange: setColumnVisibility,
   getCoreRowModel: getCoreRowModel(),
   getExpandedRowModel: getExpandedRowModel(),
 });

 return (
   <div className="space-y-4">
     {/* <AnchorTableToolbar table={table} /> */}
     <div className="rounded-md border">
       <table>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
                           header.getContext()
                         )}
                   </th>
                 );
               })}
             </tr>
           ))}
         </thead>
         <tbody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
               <>
                 <tr
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
                       )}
                     </td>
                   ))}
                 </tr>

                 {row.getIsExpanded() && (
                   <tr>
                     {/* 2nd row is a custom 1 cell row */}
                     <td colSpan={row.getVisibleCells().length}>
                       {renderSubComponent({ row })}
                     </td>
                   </tr>
                 )}
               </>
             ))
           ) : (
             <tr>
               <td colSpan={columns.length} className="h-24 text-center">
                 No results.
               </td>
             </tr>
           )}
         </tbody>
       </table>
     </div>
   </div>
 );
}

export default function App() {
 return (
   <div className="App">
     <h1>Expand Table Example</h1>
     <h2>Start editing to see some magic happen!</h2>
     <ExpandableTable
       data={expandableData}
       columns={expandableColumn}
       renderSubComponent={renderSubComponent}
       getRowCanExpand={() => true}
     />
   </div>
 );
}

Paulo Fernando tried another solution , But I'm not sure about his solution.

You can check on codSandbox

export const expandableColumns = (expandedRowState: any, setExpandedRowState: any) => {
  return [
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: ({ row, getValue }: any) => (
        <div
          style={{
            paddingLeft: `${row.depth * 2}rem`,
          }}
        >
          {row.getCanExpand() ? (
            <button
              {...{
                onClick: () => {
                  if (!row.getIsExpanded() || (row.getIsExpanded() && expandedRowState[row.id].columnIndex == 0)) {
                    row.getToggleExpandedHandler()();
                  }

                  setExpandedRowState(row.id, <p>FINGER EMOJI - {row.original.firstName}</p>, 0);
                },
                style: { cursor: "pointer" },
              }}
            >
              {row.getIsExpanded() && expandedRowState[row.id].columnIndex == 0 ? "👇" : "👉"}
            </button>
          ) : (
            "🔵"
          )}
          {getValue()}
        </div>
      ),
      footer: (props: { column: { id: any } }) => props.column.id,
    },
    {
      accessorFn: (row: { lastName: any }) => row.lastName,
      id: "lastName",
      cell: ({ row, getValue }: any) => (
        <div
          style={{
            paddingLeft: `${row.depth * 2}rem`,
          }}
        >
          {row.getCanExpand() ? (
            <button
              {...{
                onClick: () => {
                  if (!row.getIsExpanded() || (row.getIsExpanded() && expandedRowState[row.id].columnIndex == 1)) {
                    row.getToggleExpandedHandler()();
                  }

                  setExpandedRowState(row.id, <p>FLASHLIGHT EMOJI - {row.original.lastName}</p>, 1);
                },
                style: { cursor: "pointer" },
              }}
            >
              {row.getIsExpanded() && expandedRowState[row.id].columnIndex == 1 ? "♟" : "🔦"}
            </button>
          ) : (
            "🔵"
          )}
          {getValue()}
        </div>
      ),
      header: () => <span>Last Name</span>,
      footer: (props: { column: { id: any } }) => props.column.id,
    },
    {
      accessorKey: "age",
      header: () => "Age",
      footer: (props: { column: { id: any } }) => props.column.id,
    },
    {
      accessorKey: "visits",
      header: () => <span>Visits</span>,
      footer: (props: { column: { id: any } }) => props.column.id,
    },
    {
      accessorKey: "status",
      header: "Status",
      footer: (props: { column: { id: any } }) => props.column.id,
    },
    {
      accessorKey: "progress",
      header: "Profile Progress",
      footer: (props: { column: { id: any } }) => props.column.id,
    },
  ];
};

export const expandableData = [
  {
    firstName: "Marquis",
    lastName: "Runolfsdottir",
    age: 36,
    visits: 322,
    progress: 46,
    status: "single",
  },
  {
    firstName: "Hayden",
    lastName: "Ritchie",
    age: 35,
    visits: 208,
    progress: 79,
    status: "relationship",
  },]
  
  import "./styles.css";
import {
  ColumnDef,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getExpandedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";

import { expandableColumns, expandableData } from "./column-data";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  expandedRowContent: any;
  getRowCanExpand: (row: any) => boolean;
}

export function ExpandableTable<TData, TValue>({
  columns,
  data,
  expandedRowContent,
  getRowCanExpand,
}: DataTableProps<TData, TValue>) {
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});

  const table = useReactTable({
    data,
    columns,
    getRowCanExpand,
    state: {
      columnVisibility,
    },
    autoResetPageIndex: false,
    enableRowSelection: true,
    onColumnVisibilityChange: setColumnVisibility,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
  });

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <table>
          <thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <th key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </th>
                  );
                })}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <>
                  <tr
                    key={row.id}
                    data-state={row.getIsSelected() && "selected"}
                  >
                    {row.getVisibleCells().map((cell) => (
                      <td key={cell.id}>
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext()
                        )}
                      </td>
                    ))}
                  </tr>

                  {row.getIsExpanded() && (
                    <tr>
                      {/* 2nd row is a custom 1 cell row */}
                      <td colSpan={row.getVisibleCells().length}>
                        {expandedRowContent[row.id].content}
                      </td>
                    </tr>
                  )}
                </>
              ))
            ) : (
              <tr>
                <td colSpan={columns.length} className="h-24 text-center">
                  No results.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default function App() {
  const [expandedRowState, setExpandedRowState] = useState<any>([]);

  const setExpandedRowStateById = (id: any, content: any, columnIndex: any) => {
    expandedRowState[id] = { content, columnIndex };
    setExpandedRowState([...expandedRowState]);
  };

  return (
    <div className="App">
      <h1>Expand Table Example</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ExpandableTable
        data={expandableData}
        columns={expandableColumns(expandedRowState, setExpandedRowStateById)}
        expandedRowContent={expandedRowState}
        getRowCanExpand={() => true}
      />
    </div>
  );
}```

Any better solution will help. 
Thanks