Export to excel with symbol

2022-05-06 21:25 Fabio Faiella imported from Stackoverflow

In JavaScript, how can I check if a symbol(for example €) is present in the HTML cell of a table and only in that case when exporting table to xls, delete the period if present and replace it with a comma in other cases?

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

how to add a table row that have different size and display compare to other row

in this excercise, i create a table with 5 row in tr and i put the last row (1 input and 2 button) in a div class btn. the display of last row is ok but i expect to have the table border wrap the last row as well (i dont set last row as tr and td cause it will change the size of the row above). the table border already wrap the 5 row above but i need it to also wrap around the last row and im not sure whether the last row need to be put in tr and td (because its content is different from other row). please someone give a solution

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex, .quantity, .close_cell, .content {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
  border: 1px solid #dfe5e8;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}
section .detail .head {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 16px;
  background: #b6c6c9;
}
section .detail .row {
  padding: 20px 0;
}
section .detail .row .close_btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background: red;
  display: inline-block;
  text-align: center;
}
section .detail .row .close_btn:hover {
  cursor: pointer;
}
section .detail .row .square {
  display: inline-block;
  width: 62px;
  height: 62px;
  background: #99a9b5;
}
section .detail .row .square:hover {
  cursor: pointer;
}
section .detail .row .text {
  display: inline-block;
  text-transform: capitalize;
}
section .detail .row .text .blue {
  margin-left: 25px;
  color: #00bcd4;
}
section .detail .row .text .grey {
  margin-left: 18px;
  color: #cfd7dc;
  font-size: 14px;
}

.content {
  padding: 20px 0;
}

.product_col {
  width: 590px;
}

.close_cell {
  padding: 0 36px;
  justify-content: center;
}

.product {
  padding: 22px 0;
}

.quantity {
  width: 106px;
  border: 1px solid #dfe5e8;
}
.quantity span {
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.price {
  font-size: 20px;
  color: #393d50;
}

.price_col {
  width: 160px;
}

.quantity_col {
  width: 202px;
}

.total {
  font-size: 24px;
  color: #393d50;
}

.total_col {
  width: 183px;
}

td,
th {
  text-align: left;
}

tr:nth-child(even) {
  background: #f0f3f2;
}

.btn {
  padding: 24px;
}
.btn input {
  width: 260px;
  height: 52px;
  text-transform: capitalize;
  padding: 0 24px;
  border: 1px solid #dfe5e8;
  background: #f5f7f6;
}
.btn input::placeholder {
  color: #adbac4;
}
.btn .apply {
  margin-left: 24px;
  width: 115px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #00bcd4;
  border: 2px solid #00bcd4;
  background: white;
  border-radius: 3px;
}
.btn .apply:hover {
  cursor: pointer;
  background: #00bcd4;
  color: white;
}
.btn .cart {
  margin-left: 327px;
  width: 190px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: white;
  background: #00bcd4;
  border-radius: 3px;
  border: 2px solid #00bcd4;
  text-align: center;
}
.btn .cart:hover {
  cursor: pointer;
  background: #3498db;
  border-color: #3498db;
}

.quantity div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*# sourceMappingURL=price_table.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source+Sans+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/price_table.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table class="detail">
        <tr class="head">
          <th class="first_col"></th>
          <th class="product"><span>product</span></th>
          <th class="price_head"><span>price</span></th>
          <th class="quantity_head"><span>quantity</span></th>
          <th><span>total</span></th>
        </tr>

        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">lorem ipsum dolor sit amet</span>
                <span class="grey">size: large, color: black</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$35.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$35.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">consectetur adipisicing</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$1285.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$1285.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">Elit sed do eiusmod</span>
                <span class="grey">size: large</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$89.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$89.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">tempor incididunt ut labore</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$12.00</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">12.00</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">et dolore magna aliqua</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$158.25</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">158.25</span></td>
        </tr>
      </table>
      <div class="btn">
        <input type="text" placeholder="enter coupon code here.." />
        <button class="apply">apply</button>
        <button class="cart">update cart</button>
      </div>
    
    </section>
  </body>
</html>

Render tooltip outside/on top of a cell in html table?

I have a vue project that is utilizing the VueGoodTable Library. I am trying to put a conditional tool tip in data cells who's data is considered "abnormal" (this calc is done on the backend and is not important to my current issue).

Right now I am simply trying to show a tooltip on all cells inside of this table, but as the picture here shows, it is trapped inside of the cell itself and no amount of messing with the z-index has proven fruitful in getting the tooltip to show up over everything.

This table library uses slots to render it's cells, so it makes sense that whatever is in that template tag, is contained within that cell, but how can I break that case?

Any tips or ideas would be greatly appreciated!

EDIT: There seems to be Table Events in this library I am using, but I am still very unsure about how I could use this to render a tooltip in the rows. Table Events from Docs

EDIT 2: Here is a post that seemed promising for showing a table who's cells have a tooltip in them. However, their example uses roughly the same styling as I do, but their z-index seems to actually matter. Perhaps this is a limitation brought on by the library itself?

I've replicated a barebones version of my current table and tooltip component to check out what I've got.

Codesandbox Link

App.uve

<template>
  <div style="display: flex; flex-direction: column">
    <div class="wrapper">
      <vue-good-table
        style="width: 100%"
        class="issue-tracker-style"
        :columns="columns"
        :rows="rows"
        :sort-options="{
          enabled: false,
        }"
      >
        <template v-slot:table-row="scope">
          <Tooltip>
            <div>{{ scope.formattedRow[scope.column.field] }}</div>
          </Tooltip>
        </template>
      </vue-good-table>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 15rem">
      <Tooltip> soemthing </Tooltip>
    </div>
  </div>
</template>

<script>
import Tooltip from "./components/Tooltip.vue";
export default {
  name: "my-component",
  components: { Tooltip },
  mounted: function () {
    let tdElm;
    let startOffset;

    Array.prototype.forEach.call(
      document.querySelectorAll("table th"),
      function (td) {
        td.style.position = "relative";
        //td.style.maxWidth = "unset";
        let grip = document.createElement("div");
        grip.innerHTML = "&nbsp;";
        grip.style.position = "absolute";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = "5px";
        grip.style.cursor = "col-resize";
        grip.addEventListener("mousedown", function (e) {
          tdElm = td;
          startOffset = td.offsetWidth - e.pageX;
        });

        td.appendChild(grip);
      }
    );

    document.addEventListener("mousemove", function (e) {
      if (tdElm) {
        tdElm.style.minWidth = startOffset + e.pageX + "px";
      }
    });

    document.addEventListener("mouseup", function () {
      tdElm = undefined;
    });
  },
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name",
          //width: "100px"
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
      ],
      rows: [
        { id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
        {
          id: 2,
          name: "Jane Jacob Johnson OOOO",
          age: 24,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
        {
          id: 3,
          name: "Susan",
          age: 16,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 4,
          name: "Chris",
          age: 55,
          createdAt: "2011-10-11",
          score: 0.03343,
        },
        {
          id: 5,
          name: "Dan",
          age: 40,
          createdAt: "2011-10-21",
          score: 0.03343,
        },
        {
          id: 6,
          name: "John",
          age: 20,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
        {
          id: 3,
          name: "Susan",
          age: 16,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 4,
          name: "Chris",
          age: 55,
          createdAt: "2011-10-11",
          score: 0.03343,
        },
        {
          id: 5,
          name: "Dan",
          age: 40,
          createdAt: "2011-10-21",
          score: 0.03343,
        },
        {
          id: 6,
          name: "John",
          age: 20,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.wrapper {
  border: 1px solid red;
  width: 400px;
  height: 200px;
  overflow-y: scroll;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.issue-tracker-style {
  font-family: "Inter";
  width: 100%;
  .vgt-inner-wrap {
    box-shadow: none;
  }
  td > div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  td > div > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  thead {
    border: 1px solid #f0f7ff;
  }
  tr {
    background: white;
    margin: 0;
    height: 32px;  }
  td {
    min-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  tr th {
    color: #4859af;
    font-weight: 600;
    height: 100%;
    vertical-align: middle;
    padding: 0.5rem 0;
    font-size: 13px;
    background: #fafafa;
    border: 2px solid #efeff0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  tr td {
    padding: 0;
    font-size: 13px;
    color: #4859af;
    background: white;
    border: 2px solid #efeff0;
    height: 42px;
    vertical-align: middle;
  }
  tr td,
  tr th {
    text-align: center;
  }
}
</style>

How to export wordpress nested taxonomies in excel by keeping the hierarchy

I would like to export all my post categories in excel by keeping the hierarchical format as i have three level categories and subcategories.

e.g Parent Category > Subcategory 1 > Subcategory 2

So i want my excel to have 3 columns

Parent Cat	Subcat 1	Subcat 2
Technology	Computers	Desktop
Technology	Computers	Laptop
Technology	Mobiles	Brand1
Technology	Mobiles	Brand2
Technology	TV	Brand1
Technology	TV	Brand2

Any help about this? I tried with wp all export but unfortunately i take as a result:

term id	term name	parent id	parent name
1	technology	0	-
2	computers	1	technology
3	Mobiles	1	technology
4	TV	1	technology
5	Desktop	2	computers
6	laptop	2	computers
7	Brand1	3	Mobiles

I hope my example will help

Thanks in advance

Split Parameter value for the excel sheet name in Jasper Report
I am generating an excel file with multiple sheets from Jasper.

I am getting some comma(,) separated values in Jasper's input
```
for eg:- 000324,000323,000322.
```
I want to split this value and give them as the sheet names in a single excel file.

As we can see in the above example we are having 3 inputs so 4 excel sheets will be generated first sheet name will be given as info and the remaining should be named 000324,000323 and 000322.

if there are 4 inputs then 5 excel sheets will be generated in a single excel file and apart from the first sheet other sheets will be named from that 4 values which will be taken as comma separated in the input field (eg: 001,002,003,004).

I am new to Jasper Report so can anyone help me to split this input and give the name to the excel sheets.

Thanks in Advance!

Related questions

Export to excel with symbol

See also questions close to this topic