React table tutorial better than official docs

[sinclairnick]

Hey @shadcn,

Just came here to say that I found your Data Table tutorial more helpful than the official tanstack docs (which I tried and failed to use the other day).

Thanks for your work, appreciated.

[shadcn]

Thanks @sinclairnick. Appreciate it. What you working on?

[sinclairnick]

I'm currently sidelining my startup and Getting a Real Job™, but have literally rewritten the entire codebase in this process (lol), including using Shad UI for my frontend.

I'll flick you a link once my existing (yuck) UI has been replaced with the new (good) Shad version.

[reveurguy]

Hello @shadcn I really liked the data table component. I wanted to ask one thing, for a column, i want its value to be displayed as a link. How can i do that, I am not able to figure that out. All the values for the column are string values, currently they are being displayed as normal string ( i cant click on them to open the link)

[tigawanna]

Opening the discussions would be nice for show and tells and Q/A that are not issues worthy

[sinclairnick]

As promised @shadcn, here's what I've been working on, with the help of Shad UI 🙏.

https://grossr.com/

[AaronMeyers]

i thought the tutorial was great, but i'm totally lost on one thing... in the tutorial (and the Tasks example), the Actions column is defined inside the ColumnDef so if I want to create an action to delete the row, I'd somehow need to pass the delete up to the data-table.tsx file because it has the data array that populates the table. But I'm not clear on how I could pass the delete message up to the parent table because the ColumnDef isn't a React component, it just gets used with the flexRender function as far as I can tell...

I think I would need to modify the data and somehow incorporate useState so that the table gets re-rendered? Sorry... I'm still new to React, but its unclear to me what the next step is to delete a row. Thanks...

[phungvansyhb]

Anybody fail to responsive with TableData?

[mamdamin79]

hey,i implement data table like what you said in the shadcn doc and it works normally but I want to implement delete action for each row and call API for that its delete row but i need to refresh the page to see updated UI how can i do you it without reload the page?

Thanks @sinclairnick. Appreciate it. What you working on?

[mplunket]

i thought the tutorial was great, but i'm totally lost on one thing... in the tutorial (and the Tasks example), the Actions column is defined inside the ColumnDef so if I want to create an action to delete the row, I'd somehow need to pass the delete up to the data-table.tsx file because it has the data array that populates the table. But I'm not clear on how I could pass the delete message up to the parent table because the ColumnDef isn't a React component, it just gets used with the flexRender function as far as I can tell...

I think I would need to modify the data and somehow incorporate useState so that the table gets re-rendered? Sorry... I'm still new to React, but its unclear to me what the next step is to delete a row. Thanks...

Yeah I'm in the same boat on this one (still getting a feel for javascript passing of props/functions). I feel like I'm missing something obvious but would love if someone who has implemented this can shed some light!

[gulfaraz]

getContext contains table and column. These can be accessed in columns.tsx similar to how we access row,

https://github.com/shadcn-ui/ui/blob/c21ecfb665214e18c d5914ea319f925cd676e786/apps/www/app/examples/tasks/components/columns.tsx#L118

To achieve this, we change the line to include table and column,

cell: ({ table, column, row }) => <DataTableRowActions row={row} />, 

These can be sent to DataTableRowActions

To achieve this, we change the line to include table and column,

cell: ({ table, column, row }) => <DataTableRowActions table={table} column={column} row={row} />, 

But DataTableRowActions does not accept table and column,

https://github.com/shadcn-ui/ui/blob/c21ecfb665214e18cd5914ea319f925cd676e786/apps/www/app/examples/tasks/components/data-table-row-actions.tsx#L24-L30

We remedy this by including table and column in DataTableRowActionsProps interface. Don't forget to pass these into the function,

import { Table, Column, Row } from "@tanstack/react-table"

interface DataTableRowActionsProps<TData> { 
   table: Table<TData>
   column: Column<TData>
   row: Row<TData> 
 } 
  
 export function DataTableRowActions<TData>({ 
   table,
   column,
   row, 
 }: DataTableRowActionsProps<TData>) { 

Now, you should be able to use table and column with your own delete row function.

To re-render the table, you have to update the table data.

In my app, I update the table data within a useEffect with ColumnFiltersState as a dependency. So I update the data by calling which re-renders the table,

column.setFilterValue(column.getFilterValue())

Hope this helps, @AaronMeyers @mamdamin79 @mplunket

[talharamay49]

can anyone help me how to utilize an external function or a parent component function when an event click occurs from a data table button. ?

[caanyp24]

Hello guys, i use the data-table from shadcn and implemented zu search for the table. How can I search for multiple columns or entire Table data? currently I am only searching for the address column.

<Input placeholder="Filter emails..." value={ (table.getColumn("address")?.getFilterValue() as string) ?? "" } onChange={(event) => { table.getColumn("address")?.setFilterValue(event.target.value); }} className="w-[450px] shadow-md" />

[gulfaraz]

@caanyp24 you should use a global filter on the table to search across columns

[mikeebee]

A quick one for the people asking how to pass functions to cells. This is the way I have done it and it seems to be the accepted approach.

In short: pass functions in table.meta and use them in the column definition (Or inline on the table if needed)

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      // 1. Define functions here
      handleOpenDetailsPanel: (id) => handleOpenDetailsPanel(id),
    },
  });

export const tableColumns: ColumnDef<QuotesInterface>[] = [
  {
    id: 'actions',
    cell: ({ table, row }) => {
      const id = row.getValue('id') as string;

      return (
        <Box>
          <Button
           // 2. Use like this
            onClick={() => table.options?.meta.handleOpenDetailsPanel(id)}
          >
            Details
          </Button>
        </Box>
      );
    },
  },
];

Docs: https://tanstack.com/table/v8/docs/api/core/table#meta In use: https://tanstack.com/table/v8/docs/examples/react/editable-data

[imokyoureok]

@caanyp24 Here is a tutorial on how to filter on all columns : https://www.youtube.com/watch?v=ZG2_vPlQA8Q

[talharamay49]

Thanks

On Fri, Nov 24, 2023 at 11:44 AM imokyoureok @.***> wrote:

@caanyp24 https://github.com/caanyp24 Here is a tutorial on how to filter on all columns : https://www.youtube.com/watch?v=ZG2_vPlQA8Q

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/409#issuecomment-1825214772, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXTTVKBJSWK5X4U5KCXMKT3YGA64DAVCNFSM6AAAAAAYJ2FW5CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRVGIYTINZXGI . You are receiving this because you commented.Message ID: @.***>

-- [image: facebook] https://www.facebook.com/craftbentsolutions [image: twitter] https://twitter.com/craft_bent_sol [image: linkedin] https://www.linkedin.com/company/craftbentsolutions/ [image: instagram] https://www.instagram.com/craftbentsolutions/ Talha Aziz

Full Stack Developer

Craft Bent Solutions

Book a Call https://calendly.com/talharamay49/30min +44 786 8737454 <+44+786+8737454> | +92 303 221 3806 <+923032213806> @.*** https://craftbentsolutions.com/ International House 12 Constance Street, London, E16 2DQ, United Kingdom

[nimeshmaharjan1]

can anyone help me please, so basically i am using the t3 stack along with shadcn and the data table and while filtering through for say the product title as I am fetching the products data in the parent component and passing the products data in the DataTable component where the useReactTable hook is being initialized whenever the product title is changed the whole DataTable component is rerenred and the product title filter is lost what should i do?

basically its this as the title changes the whole ui is rerendered

  const productsPromise = api.product.productFindAllRoute.useQuery({
    per_page,
    page,
    title,
    column,
    order,
  });
  if (productsPromise.isLoading || !productsPromise.data)
    return (
      <DataTableSkeleton
        columnCount={6}
        isNewRowCreatable={true}
        isRowsDeletable={true}
      />
    );
  <ProductsTableShell
          data={productsPromise.data.data.products}
          pageCount={productsPromise.data.pagination.page}
        />

[neos04]

i thought the tutorial was great, but i'm totally lost on one thing... in the tutorial (and the Tasks example), the Actions column is defined inside the ColumnDef so if I want to create an action to delete the row, I'd somehow need to pass the delete up to the data-table.tsx file because it has the data array that populates the table. But I'm not clear on how I could pass the delete message up to the parent table because the ColumnDef isn't a React component, it just gets used with the flexRender function as far as I can tell...

I think I would need to modify the data and somehow incorporate useState so that the table gets re-rendered? Sorry... I'm still new to React, but its unclear to me what the next step is to delete a row. Thanks...

So basically i haven't reached that stage in the project am working on to delete a row but if your using a database or ig an API, you can pass the data object using row.original or row.getValue to get a single column value. So for example you can extract the ID and make a call to the database to delete the row where id = payment.id for eg.. In the Docs, check how he was able to get to perform actions on the each row, for example copy the payment ID. Hope this helps, if you need an more in dept explanation just let me know.

[TransonQ]

Thank you, shadcn, same expressed gratitude. The documentation is much easier to understand than the tanstack documentation. By the way, if I need to select a time range in filtering and I am looking for examples of data manipulation or component encapsulation, it would be much better than trying to decipher the tanstack documentation like a detective.