random-web-tools/src/views/general/TableToMarkdownTable.vue

<template>
  <h2 class="tool-title">Table to Markdown table</h2>
  <hr class="mt-5 mb-5" />

  <div class="input-group">
    <label for="data">Data (paste from excel)</label>
    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label for="style">Table Style</label>
    <div>
      <select id="style" v-model="toolData.selectedStyle" v-on:change="result">
        <option value="">Default</option>
      </select>
    </div>
  </div>

  <div class="input-group">
    <label>Transpose table</label>

    <div>
      <input
        id="transpose"
        name="transpose"
        v-model="toolData.transpose"
        v-on:change="result"
        type="checkbox"
      />
      <label for="transpose">transpose</label>
    </div>
  </div>

  <hr class="mt-5 mb-5" />

  <div class="input-group">
    <label for="result">Result</label>
    <MonacoEditor
      name="result"
      language="text"
      :value="toolResult"
    ></MonacoEditor>
  </div>
</template>

<script>
import { unproxy } from "@/utils/unproxy";
import MonacoEditor from "@/components/MonacoEditor.vue";

export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      toolData: {
        data: "",
        selectedStyle: "",
        transpose: false,
      },
      toolResult: "",
    };
  },
  methods: {
    result() {
      let rows = unproxy(this.toolData.data).split("\n");
      let numCols = rows[0].split("\t").length;

      // Transpose the table if the option is selected
      if (this.toolData.transpose) {
        const transposedData = [];
        for (let j = 0; j < numCols; j++) {
          const newRow = [];
          for (let i = 0; i < rows.length; i++) {
            newRow.push(rows[i].split("\t")[j] || "");
          }
          transposedData.push(newRow.join("\t"));
        }
        rows = transposedData;
        numCols = rows[0].split("\t").length;
      }

      let output = "";

      // Generate header row
      output += "| " + rows[0].split("\t").join(" | ") + " |\n";

      // Generate separator row based on selected style
      switch (this.toolData.selectedStyle) {
        default:
          output += "| " + "-".repeat(numCols).split("").join(" | ") + " |\n";
          break;
      }

      // Generate data rows
      for (let i = 1; i < rows.length; i++) {
        if (this.toolData.selectedStyle === "grid") {
          output += "| " + rows[i].split("\t").join(" | ") + " |\n";
        } else {
          output += "| " + rows[i].split("\t").join(" | ") + " |\n";
        }
      }

      this.toolResult = output;
    },
  },
};
</script>

<style lang="scss"></style>