React-admin: Могу ли я усечь <TextField>в пределах <List>?

Question

Есть ли способ обрезать текст, возвращаемый <TextField>, и показать ...?

См. title столбец на изображении ниже (я хочу усечь заголовок после 20 символов).

Есть ли конкретный c prop? К сожалению, я не нашел никакой подсказки в реакции-админа: c.

Заранее спасибо

Answer 1

Вы можете фактически манипулировать любым полем за пределами <List>, и затем получите <Datagrid> для рендеринга этого поля, если оно итеративное.

const CustomTitleField = ({ record }) => {
  // "record" is a prop received from the Datagrid
  let str = record.title;
  return record ? (
    {/* If length is greater than 20 characters, slice and add ellipsis.*/}
    <span>{str.length > 20 ?  str.slice(0, 20) + "..." : str}</span>
  ) : null;
};

// Then, within your list, do this...
export const CommentList => (
  <List {...props}>
    <Datagrid>
      <CustomTitleField /> // this should render with your truncate logic
      // ...
    </Datagrid>
   </List>
);

Дайте мне знать, как это происходит, после того, как попробуете это !!