如何在 Polaris Index Table 单元格中换行？

Question

am using Polaris Index Table to display some data in my Shopify app. One of the cells in my table has a long string of text and I want to make it wrap so that it fits the size of the screen. Is there a way to do this in Polaris?

Here is my code:

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

function SimpleIndexTableExample() {
  const customers = [
    {
      id: '3411',
      url: 'customers/341',
      name: 'Mae Jemison long text here, very very long......',
      location: 'Decatur, USA',
      orders: 20,
      amountSpent: '$2,400',
    },
    {
      id: '2561',
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
      orders: 30,
      amountSpent: '$140',
    },
  ];
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

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

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <Text variant="bodyMd" fontWeight="bold" as="span">
            {name}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          {title: 'Name'},
          {title: 'Location'},
          {title: 'Order count'},
          {title: 'Amount spent'},
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  );
}

I've tried modifying the cells, styles, etc.

Answer 1

To make the text wrap in a cell in a Polaris IndexTable, you can apply the textWrap property to the Text component that you are using within the cell.

You may try this,

 import {IndexTable, Card, useIndexResourceState, Text} from '@shopify/polaris'; import React from 'react'; function SimpleIndexTableExample() { //... const rowMarkup = customers.map( ({id, name, location, orders, amountSpent}, index) => ( <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index} > <IndexTable.Cell> <Text variant="bodyMd" fontWeight="bold" as="span" textWrap> {name} </Text> </IndexTable.Cell> <IndexTable.Cell>{location}</IndexTable.Cell> <IndexTable.Cell>{orders}</IndexTable.Cell> <IndexTable.Cell>{amountSpent}</IndexTable.Cell> </IndexTable.Row> ), ); //... }

Answer 2

I found a workaround for this – in my case there was a HTML representation of a text string available. Then I have used following construction in IndexTable.Row content:

<div dangerouslySetInnerHTML={{__html: myHTMLContent}} />

This allowed using line breaks and other HTML that can be formatted in a way you need. Of course I understand that this adds another problem of creating HTML string, but this is just a workaround.

PS that this method adds a risk of XSS attack so can recommend to use this only if you 100% understand the security side.