Which approach is more flexible and provide better dx?

[sadmann7]

 <div className="w-full space-y-2.5 overflow-auto">
      {enableAdvancedFilter ? (
        <DataTableAdvancedToolbar
          table={table}
          filterableColumns={filterableColumns}
          searchableColumns={searchableColumns}
        />
      ) : (
        <DataTableToolbar
          table={table}
          filterableColumns={filterableColumns}
          searchableColumns={searchableColumns}
          newRowLink={newRowLink}
          deleteRowsAction={deleteRowsAction}
        />
      )}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  )
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex flex-col gap-2.5">
        <DataTablePagination table={table} />
        {floatingBar && table.getFilteredSelectedRowModel().rows.length > 0
          ? floatingBar
          : null}
      </div>
    </div>

<div className="w-full space-y-2.5 overflow-auto">
     <DataTableToolbar
       table={table}
       filterableColumns={filterableColumns}
       searchableColumns={searchableColumns}
     >
       <TasksTableToolbarActions table={table} />
     </DataTableToolbar>
     <DataTable
       table={table}
       columns={columns}
       floatingBar={
         showFloatingBar ? <TasksTableFloatingBar table={table} /> : null
       }
     />
   </div>

export function TasksTableToolbarActions({
  table,
}: TasksTableToolbarActionsProps) {
  const [isDeletePending, startDeleteTransition] = React.useTransition()

  return (
    <>
      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
        <Button
          aria-label="Delete selected rows"
          variant="outline"
          size="sm"
          className="h-8"
          onClick={() => {
            startDeleteTransition(() => {
              table.toggleAllPageRowsSelected(false)
              deleteTasks({
                rows: table.getFilteredSelectedRowModel().rows,
              })
            })
          }}
          disabled={isDeletePending}
        >
          <TrashIcon className="mr-2 size-4" aria-hidden="true" />
          Delete
        </Button>
      ) : null}
      {/**
       * Other actions can be added here, such as: new task, export, etc.
       */}
    </>
  )
}

tldr: should the toolbar be within the data-table component?

[noxify]

should the toolbar be within the data-table component?

I would prefer option 2 - Makes more sense for me and seems to be more modular.