Question 72536 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to limit the text length of each cell in the material react table? – Reactjs

A regular table like this

<MaterialReactTable
  columns={columns}
  data={emailResults}
  enableColumnFilters={false}
  enableMultiRowSelection={false}
  onRowSelectionChange={setRowSelection}
>

I dont want to modify emailResults the underlying data structure because this is more of a presentation logic thing and I need the full length data intact.

Tags:

2

Answers


  1. 0 
    {
    field: 'emailBody',
    headerName: 'Email Body',
    headerAlign: 'center',
    renderCell: (params: GridRenderCellParams<any>) => params.row.emailBody.slice(0, YOUR_TEXT_LIMIT),
}

    Just render cell with truncated text and keep the original text the same way

    Login or Signup to reply.
  2. 0

    Beside from what Joel has answered, you can also limit the cell width by using CSS (column width remains intact).

    You need to modify the column object by adding a Cell option which you would use to custom render the data cells.

    const columns = useMemo(

() => [
  {
    accessorKey: 'firstName',
    header: 'First Name',
    Cell: ({ cell }) => {
      return <Box sx={{
        display: 'flex',
        alignItems: 'center',
        color: "green",
        width: "120px",
        overflow: "hidden"
      }}>{cell.getValue()}</Box>;
    },
  },

    ref- docs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search