[IndexTable][with disabled rows]

[jigsnesh]

Summary

Hope this concern will find you

Currently I am using your polaris component called IndexTable with disabled Rows (https://polaris.shopify.com/components/tables/index-table?example=index-table-with-disabled-rows), and the case is look like this

• If i have one data and data is working as disabled row then IndexTable showing no records found

Expected behavior

It should show one disabled row instead of no records found in IndexTable

I have tried one solution please look into this, i guess it is working as exprected

import {
IndexTable,
LegacyCard,
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from "@shopify/polaris";
import React from "react";

function IndexTableWithDisabledRowsExample() {
const orders = [
{
id: "1019",
order: "#1019",
date: "Jul 20 at 3:46pm",
customer: "Ruben Westerfelt",
total: "$701.19",
paymentStatus: Partially paid,
fulfillmentStatus: Unfulfilled,
disabled: true,
},
];
const resourceName = {
singular: "order",
plural: "orders",
};

const selectableOrders = orders.filter((order) => !order.disabled);

const { selectedResources, allResourcesSelected, handleSelectionChange } =
useIndexResourceState(selectableOrders);

const rowMarkup = orders.map(
(
{
id,
order,
date,
customer,
total,
paymentStatus,
fulfillmentStatus,
disabled,
},
index
) => (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
disabled={disabled}
>
<IndexTable.Cell>

{order}

</IndexTable.Cell>
<IndexTable.Cell>{date}</IndexTable.Cell>
<IndexTable.Cell>{customer}</IndexTable.Cell>
<IndexTable.Cell>

{total}

</IndexTable.Cell>
<IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
<IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
</IndexTable.Row>
)
);

return (

<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={
selectableOrders.length === 0
? orders.length
: selectableOrders.length
}
selectedItemsCount={
allResourcesSelected ? "All" : selectedResources.length
}
onSelectionChange={handleSelectionChange}
headings={[
{ title: "Order" },
{ title: "Date" },
{ title: "Customer" },
{ title: "Total", alignment: "end" },
{ title: "Payment status" },
{ title: "Fulfillment status" },
]}
>
{rowMarkup}


);
}

export default IndexTableWithDisabledRowsExample;

Changes I have made in this code is:
itemCount={
selectableOrders.length === 0
? orders.length
: selectableOrders.length
}

Actual behavior

import {
IndexTable,
LegacyCard,
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from '@shopify/polaris';
import React from 'react';

function IndexTableWithDisabledRowsExample() {
const orders = [
{
id: '1019',
order: '#1019',
date: 'Jul 20 at 3:46pm',
customer: 'Ruben Westerfelt',
total: '$701.19',
paymentStatus: Partially paid,
fulfillmentStatus: Unfulfilled,
disabled: true,
},
];
const resourceName = {
singular: 'order',
plural: 'orders',
};

const selectableOrders = orders.filter((order) => !order.disabled);

const {selectedResources, allResourcesSelected, handleSelectionChange} =
useIndexResourceState(selectableOrders);

const rowMarkup = orders.map(
(
{
id,
order,
date,
customer,
total,
paymentStatus,
fulfillmentStatus,
disabled,
},
index,
) => (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
disabled={disabled}
>
<IndexTable.Cell>

{order}

</IndexTable.Cell>
<IndexTable.Cell>{date}</IndexTable.Cell>
<IndexTable.Cell>{customer}</IndexTable.Cell>
<IndexTable.Cell>

{total}

</IndexTable.Cell>
<IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
<IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
</IndexTable.Row>
),
);

return (

<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={selectableOrders.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
headings={[
{title: 'Order'},
{title: 'Date'},
{title: 'Customer'},
{title: 'Total', alignment: 'end'},
{title: 'Payment status'},
{title: 'Fulfillment status'},
]}
>
{rowMarkup}


);
}

export default IndexTableWithDisabledRowsExample;

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes

Polaris version number

No response

Browser

No response

Device

No response