Blueprint: Support non-ideal state within a table

[tgreenwatts]

If a table has no rows, it looks more like an error than an empty table. It'd be nice if it could say "No rows" or something. Apps should have the ability to set this message themselves

I imagine people will want the ability to add custom content here - like a link to where they can take some action that will add rows. That can also be a second step

[llorca]

If a table has no rows, it looks more like an error than an empty table. It'd be nice if it could say "No rows" or something. Apps should have the ability to set this message themselves

Precisely, does it mean that the dataset is loaded, but empty? If not, what are the different meanings of "no rows"?

I wonder if there's a composition story we can figure out here, instead of adding extra functionality to the table. (NIS isn't valid in spreadsheets, only tables, and our table supports both models.)

I imagine people will want the ability to add custom content here - like a link to where they can take some action that will add rows. That can also be a second step

That's already possible with the current NIS 👍

[cmslewis]

My initial thought is that you could just show a <NonIdealState> _instead of_ a <Table> and not have to build any special empty-state logic into <Table> itself. But if you want to continue showing the column headers, that's trickier. I'd be down to support some kind of empty state in that case.

@tgreenwatts thoughts on whether column headers would need to be shown in the empty state?

[llorca]

They do need to be shown in the case where the dataset is empty. In certain cases I suppose you could add data manually too, spreadsheet style

[tgreenwatts]

Yep the usecase I want to support is keeping the headers visible so users can see what their data would look like and maybe why there aren't any rows.

[giladgray]

this seems like it should be really easy for applications to handle. almost easier than us adding several props to allow them to customize an NIS. composition over inheritance!

[brsanthu]

@giladgray What OP is asking and we are also looking for is to keep the grid structure as is but show a message or NIS inside the body area of the table. How we can do this in composition way?

I think table supporting a prop emptyElement or similar to that, which is displayed when there are no rows would be ideal. So users can pass in a message or NIS.

[adidahiya]

@giladgray there is no inheritance here. Inheritance refers to OOP and we are not asking to extend any classes. Sending <NonIdealState> into <Table> as a prop is still composition -- you are using two components together rather than re-building a non-ideal state bespoke to table. I think this is a reasonable request, as pointed out by @brsanthu. There's no great way to put a non-ideal state in the table body without using an overlay element at the moment:

<Table>
    <NonIdealState ... />
</Table>

^ this isn't supported. It produces a console warning and throws an error when trying to invoke renderCell. I don't really have a preference for whether this is supported via children or a new Table prop.

[brsanthu]

If I can mention the preference, supporting it as prop is preferred in my point of view. Otherwise, app has to do the logic to add that children depending on if there are rows. If it is prop, Table can render that if rows count is zero.

[tgreenwatts]

Closing this is in favor of using css

[wafisher]

Do you mind describing how you did this with CSS?

[adidahiya]

@wafisher it's not the cleanest solution, but something like this works: https://codesandbox.io/s/blueprint-sandbox-forked-wnsjj?file=/src/index.tsx