CODEWITHSUNDEEP
javascriptreactjsmaterial-uimui-datatable
JS3
JS3

Reputation: 1837

Is there a way where I could put a line break for each data it displays?

I have this array and I can already display it on the screen. I'm wondering if I can put a line break for each of the data it displays.

{
      name: "cartItems",
      label: "Product Name",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          // console.log(value, "cartItems");
          return value.map(
            (value) =>
              value.name +
              " (" +
              value.color +
              ") - " +
              " Qty:" +
              value.quantity +
              ","
          );
        }
      }
    }

As of now, it displays in one line like this:

Item name (item color) - Qty: 1 Item name (item color) - Qty: 2 Item name (item color) - Qty: 2

I wanted to somehow display it like this:

Item name (item color) - Qty: 1
Item name (item color) - Qty: 2
Item name (item color) - Qty: 2

Is this possible?

Upvotes: 0

Views: 219

Answers (2)

Zabon
Zabon

Reputation: 255

Try this :

return value.map((value) => `${value.name} (${value.color}) - Qty: ${value.quantity}, 
`);

Upvotes: 1

yanir midler
yanir midler

Reputation: 2712

Try to add \n

          return value.map(
            (value) =>
              value.name +
              " (" +
              value.color +
              ") - " +
              " Qty:" +
              value.quantity +
              "," + 
              "\n"
          );

Upvotes: 2

Related Questions