diff --git a/packages/nc-gui/components/virtual-cell/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
similarity index 61%
rename from packages/nc-gui/components/virtual-cell/Barcode.vue
rename to packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index 097656f47f..e7878bcf7e 100644
--- a/packages/nc-gui/components/virtual-cell/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -1,5 +1,6 @@
-
- heja
+ {{ barcodeValue }}
-
+
-
+
-
-
diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts
new file mode 100644
index 0000000000..511e4c74aa
--- /dev/null
+++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts
@@ -0,0 +1,67 @@
+import { defineComponent, h } from 'vue'
+import JsBarcode from 'jsbarcode'
+
+// TODO: add proper reference for the origin of this code here
+export default defineComponent({
+ name: 'JsBarcodeWrapper',
+
+ props: {
+ /**
+ * The value of the bar code.
+ */
+ value: {
+ type: String,
+ default: undefined,
+ },
+
+ /**
+ * The options for the bar code generator.
+ * {@link https://github.com/lindell/JsBarcode#options}
+ */
+ options: {
+ type: Object,
+ default: undefined,
+ },
+
+ /**
+ * The tag name of the component's root element.
+ */
+ tag: {
+ type: String,
+ default: 'canvas',
+ },
+ },
+
+ watch: {
+ $props: {
+ deep: true,
+ immediate: true,
+
+ /**
+ * Update the bar code when props changed.
+ */
+ handler() {
+ if (this.$el) {
+ this.generate()
+ }
+ },
+ },
+ },
+
+ mounted() {
+ this.generate()
+ },
+
+ methods: {
+ /**
+ * Generate bar code.
+ */
+ generate() {
+ JsBarcode(this.$el, String(this.value), this.options)
+ },
+ },
+
+ render() {
+ return h(this.tag, this.$slots.default)
+ },
+})
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 39e1b1028b..d3f97bf83a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -251,6 +251,7 @@
"qrCodeValueColumn": "Column with QR code value",
"barcodeValueColumn": "Column with Barcode value",
"qrCodeValueTooLong": "Too many characters for a QR code",
+ "barcodeValueTooLong": "Too many characters for a barcode",
"aggregateFunction": "Aggregate function",
"dbCreateIfNotExists": "Database : create if not exists",
"clientKey": "Client Key",
diff --git a/packages/nc-gui/plugins/ant.ts b/packages/nc-gui/plugins/ant.ts
index 5ee06e280c..b1b5b403ff 100644
--- a/packages/nc-gui/plugins/ant.ts
+++ b/packages/nc-gui/plugins/ant.ts
@@ -1,9 +1,9 @@
import { Menu as AntMenu, Modal as AntModal, message } from 'ant-design-vue'
-import VueBarcode from '@chenfengyuan/vue-barcode'
+// import VueBarcode from '@chenfengyuan/vue-barcode'
import { defineNuxtPlugin } from '#imports'
export default defineNuxtPlugin((nuxtApp) => {
- nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
+ // nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
nuxtApp.vueApp.component(AntMenu.name, AntMenu)
nuxtApp.vueApp.component(AntModal.name, AntModal)
message.config({