Feature Request: Table Component #229

skonky · 2023-04-21T11:33:52Z

No description provided.

stormynight9 · 2023-04-21T20:48:47Z

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

mhaidarhanif · 2023-04-22T03:45:43Z

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:

tcortega · 2023-04-22T04:59:48Z

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 · 2023-04-22T05:32:03Z

@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 · 2023-04-22T05:43:36Z

@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 · 2023-04-22T07:04:44Z

@tcortega Sure thing, you're welcooome

kirk-admin · 2023-04-24T07:22:48Z

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 · 2023-04-25T04:59:27Z

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

valerius21 · 2023-04-27T00:34:48Z

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 · 2023-04-27T04:01:56Z

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 · 2023-04-27T14:25:53Z

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

tcortega · 2023-04-27T14:36:23Z

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 · 2023-04-27T16:36:20Z

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 · 2023-05-02T15:04:55Z

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 · 2023-05-02T16:20:46Z

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 · 2023-05-02T22:27:32Z

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 · 2023-05-03T01:01:35Z

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 · 2023-05-03T01:12:57Z

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 · 2023-05-10T08:26:36Z

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

kirk-admin mentioned this issue Apr 24, 2023

[Request] Can Tables component be added #242

Closed

skonky linked a pull request Apr 30, 2023 that will close this issue

feat(Table): Add Table component #248

Merged

shadcn closed this as completed in #248 May 8, 2023

u007 pushed a commit to u007/ui that referenced this issue Sep 1, 2024

docs: make <DataTable /> reactive (shadcn-ui#229)

15c42f9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature Request: Table Component #229

Feature Request: Table Component #229

skonky commented Apr 21, 2023

stormynight9 commented Apr 21, 2023

mhaidarhanif commented Apr 22, 2023 •

edited

Loading

tcortega commented Apr 22, 2023

mhaidarhanif commented Apr 22, 2023 •

edited

Loading

tcortega commented Apr 22, 2023

mhaidarhanif commented Apr 22, 2023

kirk-admin commented Apr 24, 2023

freshtechs commented Apr 25, 2023

valerius21 commented Apr 27, 2023

tcortega commented Apr 27, 2023

mhaidarhanif commented Apr 27, 2023 •

edited

Loading

tcortega commented Apr 27, 2023

mhaidarhanif commented Apr 27, 2023 •

edited

Loading

multiwebinc commented May 2, 2023 •

edited

Loading

mhaidarhanif commented May 2, 2023 •

edited

Loading

tcortega commented May 2, 2023

mhaidarhanif commented May 3, 2023 •

edited

Loading

multiwebinc commented May 3, 2023

mhaidarhanif commented May 10, 2023

Feature Request: Table Component #229

Feature Request: Table Component #229

Comments

skonky commented Apr 21, 2023

stormynight9 commented Apr 21, 2023

mhaidarhanif commented Apr 22, 2023 • edited Loading

tcortega commented Apr 22, 2023

mhaidarhanif commented Apr 22, 2023 • edited Loading

tcortega commented Apr 22, 2023

mhaidarhanif commented Apr 22, 2023

kirk-admin commented Apr 24, 2023

freshtechs commented Apr 25, 2023

valerius21 commented Apr 27, 2023

tcortega commented Apr 27, 2023

mhaidarhanif commented Apr 27, 2023 • edited Loading

tcortega commented Apr 27, 2023

mhaidarhanif commented Apr 27, 2023 • edited Loading

multiwebinc commented May 2, 2023 • edited Loading

mhaidarhanif commented May 2, 2023 • edited Loading

tcortega commented May 2, 2023

mhaidarhanif commented May 3, 2023 • edited Loading

multiwebinc commented May 3, 2023

mhaidarhanif commented May 10, 2023

mhaidarhanif commented Apr 22, 2023 •

edited

Loading

mhaidarhanif commented Apr 22, 2023 •

edited

Loading

mhaidarhanif commented Apr 27, 2023 •

edited

Loading

mhaidarhanif commented Apr 27, 2023 •

edited

Loading

multiwebinc commented May 2, 2023 •

edited

Loading

mhaidarhanif commented May 2, 2023 •

edited

Loading

mhaidarhanif commented May 3, 2023 •

edited

Loading