Feature Request: Table Component

[stormynight9]

Check the typography page, there is a table in there.

[mhaidarhanif]

While it's true there is a table "example" in the Typography that looks like this:

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">
      <table className="w-full">
        <thead>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              King's Treasury
            </th>
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              People's happiness
            </th>
          </tr>
        </thead>
        <tbody>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Empty
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Overflowing
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Modest
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Satisfied
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Full
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Ecstatic
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

But probably if meant to be a "ready to use component", it will be like this:

export function TableExample() {
  return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>King's Treasury</TableHead>
            <TableHead>People's happiness</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableData>Empty</TableData>
            <TableData>Overflowing</TableData>
          </TableRow>
          <TableRow>
            <TableData>Modest</TableData>
            <TableData>Satisfied</TableData>
          </TableRow>
          <TableRow>
            <TableData>Full</TableData>
            <TableData>Ecstatic</TableData>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

References/inspirations:

• https://flowbite.com/docs/components/tables
• https://tanstack.com/table/v8

[tcortega]

While it's true there is a table "example" in the Typography that looks like this:

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">
      <table className="w-full">
        <thead>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              King's Treasury
            </th>
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              People's happiness
            </th>
          </tr>
        </thead>
        <tbody>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Empty
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Overflowing
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Modest
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Satisfied
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Full
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Ecstatic
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

But probably if meant to be a "ready to use component", it will be like this:

export function TableExample() {
  return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>King's Treasury</TableHead>
            <TableHead>People's happiness</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableData>Empty</TableData>
            <TableData>Overflowing</TableData>
          </TableRow>
          <TableRow>
            <TableData>Modest</TableData>
            <TableData>Satisfied</TableData>
          </TableRow>
          <TableRow>
            <TableData>Full</TableData>
            <TableData>Ecstatic</TableData>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

Indeed, a Table component offers more advanced features such as column sorting, pagination, and possibly the ability to use custom Row/Column Templates with the items passed as parameters, making it distinct from the simple table example in the docs.

+1

[mhaidarhanif]

@tcortega It can also starts simple with only the styling first, without any particular interactive feature. Like what Flowbite has here: https://flowbite.com/docs/components/tables

If need more functionality (not just a styling) then will need to integrate with existing table library such as TanStack Table: https://tanstack.com/table/v8

[tcortega]

@tcortega It can also starts simple with only the styling first, without any particular interactive feature. Like what Flowbite has here: https://flowbite.com/docs/components/tables

If need more functionality (not just a styling) then will need to integrate with existing table library such as TanStack Table: https://tanstack.com/table/v8

I'll use TanStack Table in the meanwhile, didn't know about it, thankssssssss

[mhaidarhanif]

@tcortega Sure thing, you're welcooome

[kirk-admin]

Hey there! If you're searching for something a bit more advanced, you might enjoy exploring Material UI Data Grid: https://mui.com/x/react-data-grid/ this is what i use for now but having a hard time customizing it to fit the UI design, It would be fantastic to see it integrated as a feature in the future! 😊

[freshtechs]

+1 a table component that would allow filtering/pagination/sorting would be very useful

[valerius21]

I'd love to see that too!

I've already combined some of the table styles from the typography page with tanstack table.

Has anyone some ideas, which parts of the tanstack table api a component should cover? I'd PR one.

[tcortega]

I'd love to see that too!

I've already combined some of the table styles from the typography page with tanstack table.

Has anyone some ideas, which parts of the tanstack table api a component should cover? I'd PR one.

I think this ends up being a pretty personal answer, but, I'd pretty much just use filtering support (global/custom filtering, not filtering per column), column sorting, pagination and that's pretty much I guess?

[mhaidarhanif]

There is a PR related to this: https://github.com/shadcn/ui/pull/248 feat(Table): Add Table component

[tcortega]

There is a PR for this: #248 feat(Table): Add Table component

I'd say that this table is pretty solid but also too simple

[mhaidarhanif]

I'd say that this table is pretty solid but also too simple

Yeah, @shadcn said:

This looks great. I've been testing tanstack-table integration. I'll give this a try with this component and report back.

And @multiwebinc said:

Since tanstack-table might be overkill for simple tables, you might want to consider adding it as a separate component, sort of like how MUI has Table for simple tables and DataGrid for more advanced uses.

[multiwebinc]

As an alternative, I would also like to recommend Adobe's React Aria, which has an accessibility-first philosophy and would probably be a better fit for Radix.

[mhaidarhanif]

As an alternative, I would also like to recommend Adobe's React Aria, which has an accessibility-first philosophy and would probably be a better fit for Radix.

Just realized this is also nice.

Probably at the moment if people need a Table component depending on the use cases or complexity, here are the options:

• Simple table -> upcoming shadcn UI Table, MUI Table
• More featured table -> React Aria useTable, MUI DataGrid
• Full featured complex table -> TanStack Table

Note: This is not just about for table component in shadcn UI case, rather for general answers.

[tcortega]

As an alternative, I would also like to recommend Adobe's React Aria, which has an accessibility-first philosophy and would probably be a better fit for Radix.

Just realized this is also nice.

Probably:

• Simple table -> upcoming shadcn UI Table, MUI Table
• More featured table -> React Aria useTable, MUI DataGrid
• Full featured complex table -> TanStack Table

To be honest, I don't see the necessity of using intermediate tables like React Aria's or MUI's. TanStack already offers accessibility and is extremely user-friendly. It provides optional features that work seamlessly across various browsers. I've built and tested it using the same style as shadcn.

Typically, there are two scenarios: displaying a small amount of data in a tabular format, or displaying a small or large dataset with filtering, sorting, and pagination capabilities for users. Given that React Aria's table lacks pagination, I find the middle option redundant.

[mhaidarhanif]

To be honest, I don't see the necessity of using intermediate tables like React Aria's or MUI's. TanStack already offers accessibility and is extremely user-friendly. It provides optional features that work seamlessly across various browsers. I've built and tested it using the same style as shadcn.

Typically, there are two scenarios: displaying a small amount of data in a tabular format, or displaying a small or large dataset with filtering, sorting, and pagination capabilities for users. Given that React Aria's table lacks pagination, I find the middle option redundant.

@tcortega Yes, you're correct. To clarify, actually, for my above list, I was not specifically talking about table components in this case only. But rather some options people can choose at the moment. Therefore, the necessity will depend on the person needing the components. So it depends.

Also, I see that currently in existing PR, #248 by @multiwebinc, it leans towards the simple table first, just the UI. And it's already fine.

In that PR, @shadcn said:

making tanstack-table the default would be overkill for most app. I suggest we move forward with @multiwebinc

primitive and add tanstack-table as an example.

multiwebinc commented 1 year ago

TanStack already offers accessibility and is extremely user-friendly

@tcortega Actually TanStack does not offer accessibility (straight from its author), so if we want to follow the same philosophy as Radix, we would need to code accessibility ourselves. I have no idea what that would entail, if it's just a few lines of code, or hundreds.

mhaidarhanif commented 1 year ago

Whoa and what just shipped is also the Data Table with TanStack Table

https://ui.shadcn.com/examples/tasks https://ui.shadcn.com/docs/components/data-table

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[multiwebinc]

TanStack already offers accessibility and is extremely user-friendly

@tcortega Actually TanStack does not offer accessibility (straight from its author), so if we want to follow the same philosophy as Radix, we would need to code accessibility ourselves. I have no idea what that would entail, if it's just a few lines of code, or hundreds.

[mhaidarhanif]

Whoa and what just shipped is also the Data Table with TanStack Table

https://ui.shadcn.com/examples/tasks https://ui.shadcn.com/docs/components/data-table