[CRUD] Allow customizing the show display fields

[brightsider]

Solution for #5034

[mui-bot]

Netlify deploy preview

https://deploy-preview-5105--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against 6eef031

[brightsider]

example of usage:

const renderName = (data: Model) => (
  <div className="flex items-center gap-2">
    <Avatar src={data.logo} sx={{ width: 32, height: 32 }}>
      <Typography fontWeight={500} textAlign="center">
        {nameToAvatar(data.name)}
      </Typography>
    </Avatar>
    <p>{data.name}</p>
  </div>
);

const field: DataField = {
  flex: 2,
  field: 'name',
  editable: true,
  type: 'string',
  sortable: false,
  filterable: false,
  headerName: 'Name',
  renderCell: ({ row }) => renderName(row as Model),
  renderShowField: ({ data, headerName }) => {
    return (
      <Grid key="name" size={{ sm: 12, xs: 12 }}>
        <Paper sx={{ px: 2, py: 1 }}>
          <Typography variant="overline">{headerName}</Typography>
          {renderName(data as Model)}
        </Paper>
      </Grid>
    );
  },
};