sadmann7 / shadcn-table Goto Github PK

Feature description

Would love to see grouping support: https://tanstack.com/table/latest/docs/guide/grouping

Additional Context

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

I just checked out AG Grid and it looks cool.
What if we could develop this DataTable into a Batteries Included Table which can be used by the most junior developer to the largest teams.
What other features can be implemented ?
I was thinking of some more features

1. Sort by Multiple Columns (excel like sort options)
2. Full text search rather than a multiple search bars for multiple search options along with support for advanced querying like Google search
   
3. Multiple Data Presentation formats - Text, Charts, Graphs and Plots - Can be used in
4. Export Table as viewed by the user to Google Sheets or Microsoft Excel

Sorely missing at the moment. Would love an example for how to implement it.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency @hookform/resolvers to v3.4.0

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency eslint to v9
• chore(deps): update pnpm to v9
• chore(deps): update pnpm/action-setup action to v4

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug

https://www.loom.com/share/b92de30f533e4b2bbdf3008811f566ea?sid=5d2f66f4-76bb-45a6-b389-388c2c1688ac

How to reproduce

1. Go here: https://table.sadmn.com/?page=1&sort=createdAt.desc&from=2024-05-08&to=2024-05-14
2. Look at the date-range component, compare with url.

Link to reproduction

https://table.sadmn.com/?page=1&sort=createdAt.desc&from=2024-05-08&to=2024-05-14

Additional information

No response

Describe the bug

Hello @sadmann7,

The useDataTable is currently always adding "createdAt.desc" to the URL, as it is the default sort in the use-data-table schema constant.

This is an issue, as we might need "updatedAt" or another type of time sorting, or even no time sorting at all, like sorting simply by IDs.

It seems to me that we should make the schema a mandatory parameter for the use-data-table, so users can choose whether to default to "createdAt", somthing else or nothing at all (thus using the ID as it is the default in queries.ts).

Kind regards.

How to reproduce

Link to reproduction

Additional information

No response

Hi,
requesting a sticky header feature where the scrolling only happens within the tbody

Hi, thank you very much for creating this wonderful component.. This is really helpful.

One issue i have though while using it was that the page parameter resets back to page=1 if I reload the browser while I'm in a different page (ex. page=3).
It also reset back to page=1 if I directly visit a url with parameter (ex. page=2, page=3, etc. )

Describe the bug

The values in the update sheet were not the values of the selected item after create a new item

How to reproduce

1. create a new task
2. edit the newly created task

Link to reproduction

Additional information

Reproduce in the demo site: https://table.sadmn.com/

Hi
I was expecting the floating bar to stay at bottom-1 position and always be visiblte on the screen.
Not only it goes all way down when in increase the pageSize, but it doesn't stay fix.

Hi all, i clone your repo and run in my local. I use mysql/mysql-server:8 and node v20.9.0. When i access to path "/", i get an exception:
⨯ Internal error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Cause: [Error: 00683F3B8E7F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:354: ] { library: 'SSL routines', reason: 'wrong version number', code: 'ERR_SSL_WRONG_VERSION_NUMBER' } ⨯ Internal error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) digest: "3747308182"
Anyone could help me? Thanks so much!

Example click on this link.
https://shadcn-table-alt.vercel.app/?page=1&status=in-progress&priority=medium

We should have status set to "in progress" and priority set to "medium".
Instead of this, everything is reset.

If I select the first item in the list, when I move to the next page the first item is still selected. I've fixed this in useDataTable in our project by simply adding this

Not sure if this is a good approach (notably if I increase the per-page this won't persist already selected items), and I've notice it still happens when I select filters.

Describe the bug

Date range in UI isn't persisted across reloads

How to reproduce

1. Go to https://table.sadmn.com/?page=1&sort=createdAt.desc&per_page=30&operator=and&from=2024-05-08&to=2024-06-03
2. Notice the date range is not selected in the UI, although the filter is being applied correctly

Link to reproduction

https://table.sadmn.com/?page=1&sort=createdAt.desc&per_page=30&operator=and&from=2024-05-08&to=2024-06-03

Additional information

No response

Describe the bug

Not sure if missing something but https://table.sadmn.com/ is showing a 404 message

How to reproduce

Go to https://table.sadmn.com/

Link to reproduction

https://table.sadmn.com/

Additional information

No response

Clicking on the filters opens the command box and it's responsive to keyboard input but I cannot click any of the filters.

Feature description

Could you add a boolean filter ?

Many thanks in advance :)

Additional Context

Actually we can filter by search text, by selectable options, there is no simple boolean filter.

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

Describe the bug

No results returned.

How to reproduce

Turn on advance filtering
Filter by something

Link to reproduction

https://table.sadmn.com/?page=1&sort=createdAt.desc&per_page=10&operator=and&title=We.contains

Additional information

Note that the link generated by the advanced filtering case does not initialize the table state appropriately in an advanced state, too.

Feature description

I'd like to have as many rows in the table as possible to fill the container/viewport on load (i.e. no need on resize). At the moment it is set by a select dropdown.

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

Hi. what params in the useDataTable to set to have a full page without pagination?

pageCount: -1 or pageCount: 1 doesn't work?

I noticed in the demo when you select a filter and also use the Title search/filter, once you click on reset; the filter value is not fully reset and still is preset in the URL. Here's a quick screencast top to show you what I am running into.

By the way, thank you so much @kavinvalli & @sadmann7 for creating this. I found it while watching your livecode247 channel on youtube. It has been very helpful and exactly what I have been looking for. 🙏🏻

Feature description

Add the ability to export data to csv

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

Hello! First of all great contribution to OSS on how to use shadcn with server side pagination, not an easy task.

I was testing the implementation and it seems that when setting different page size from initial (p.e.: 20) is not working?

Thanks a lot

EDIT: I've been testing a little bit more and I found that if you set it on the URL it works, but when changing on the popover don't. Also I have checked that, for example if you are on the second page and then you change the page size from 20 to 10, it does not reload and instead it goes to the 3rd page.

shadcn already has a toast component. So why do we use sonner? Seems to be adding an extra dependency

Feature description

I have a table with userId field, but it is not helpful to display it as is, instead It would be nice to have the ability to easily add columns from the referenced table (user.name):

export const users = pgTable("users", {
  id: serial("id").primaryKey(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").default(sql`current_timestamp`),
})

export const tasks = pgTable("tasks", {
  id: varchar("id", { length: 30 })
    .$defaultFn(() => generateId())
    .primaryKey(),
  // ...
  userId: integer("user_id").notNull().references(() => users.id),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").default(sql`current_timestamp`),
})

export const tasksRelations = relations(tasks, ({ one }) => ({
  user: one(users, {
    fields: [tasks.userId],
    references: [users.id],
  }),
}));

p.s. I've tried it myself, it did work, but it's very hacky and also type for DataTableFilterField.value had to be changed to string, because the id of my column was user_name as a result of referencing

Additional Context

Also, maybe we can utilize dynamic query building for better types and more reusability:
https://orm.drizzle.team/docs/dynamic-query-building

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

Describe the bug

If inside the xxx-table-column we add enableSorting:true and enableHiding:false to a column definition, the column header keep showing hide option in the dropdown menu.

We can do the following to reflect enableHide:false :

{column.getCanHide() ? (
   <>
      <DropdownMenuSeparator />
       <DropdownMenuItem
          aria-label="Hide column"
          onClick={() => column.toggleVisibility(false)}
       >
          <EyeNoneIcon
             className="mr-2 size-3.5 text-muted-foreground/70"
             aria-hidden="true"
          />
          Hide
       </DropdownMenuItem>
     </>
) : null}

also :
If enableHiding: true but enableSorting:false we loose the sorting dropdown containing the quick access to the hide option.

I propose the following :

  if (!column.getCanSort()  && !column.getCanHide()) {
    return <div className={cn(className)}>{title}</div>
  }
  
  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
           aria-label={
              column.getCanSort() 
                ? column.getIsSorted() === "desc"
                  ? `Sorted descending. Click to sort ascending.`
                  : column.getIsSorted() === "asc"
                    ? `Sorted ascending. Click to sort descending.`
                    : `Not sorted. Click to sort ascending.`
                : undefined
            }
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-accent"
          >
            <span>{title}</span>
            {column.getCanSort() ? (
                column.getIsSorted() === "desc" ? (
                  <RxArrowDown className="ml-2 size-4" aria-hidden="true" />
                ) : column.getIsSorted() === "asc" ? (
                  <RxArrowUp className="ml-2 size-4" aria-hidden="true" />
                ) : (
                  <RxCaretSort className="ml-2 size-4" aria-hidden="true" />
                )
            ) : (
              <RxCaretSort className="ml-2 size-4" aria-hidden="true" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          {column.getCanSort() ? (
            <>
              <DropdownMenuItem
                aria-label="Sort ascending"
                onClick={() => column.toggleSorting(false)}
              >
                <ArrowUpIcon
                  className="mr-2 size-3.5 text-muted-foreground/70"
                  aria-hidden="true"
                />
                Asc
              </DropdownMenuItem>
              <DropdownMenuItem
                aria-label="Sort descending"
                onClick={() => column.toggleSorting(true)}
              >
                <ArrowDownIcon
                  className="mr-2 size-3.5 text-muted-foreground/70"
                  aria-hidden="true"
                />
                Desc
              </DropdownMenuItem>
           </>
          ) : null}
          
          {column.getCanSort() && column.getCanHide() ? (
             <DropdownMenuSeparator />
            )  : null}
          
         {column.getCanHide() ? (
            <DropdownMenuItem
              aria-label="Hide column"
              onClick={() => column.toggleVisibility(false)}
            >
              <EyeNoneIcon
                className="mr-2 size-3.5 text-muted-foreground/70"
                aria-hidden="true"
              />
              Hide
            </DropdownMenuItem>
         )  : null}
         
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )

Note : we should maybe also add a clearSorting that would go back to the initial sorting ? this one I m not sure if it is necessary.

How to reproduce

add enableSorting: true and enableHiding: false to a column def

Link to reproduction

Additional information

No response