supervisely 6.73.420__py3-none-any.whl → 6.73.422__py3-none-any.whl

supervisely/app/widgets/fast_table/script.js

@@ -1,4 +1,262 @@
 Vue.component('fast-table', {
+  template: `
+    <!-- eslint-disable vue/no-v-html -->
+    <div class="sly-ninja-table" :disabled="disabled" style="position: relative;">
+    <div v-if="disabled" class="sly-fast-table-disable-overlay"></div>
+      <div class=" tailwind fast-table">
+        <div
+          ref="wrapper"
+          class="rounded-lg border border-slate-200 bg-white overflow-hidden"
+        >
+          <div
+            v-if="settings.showHeaderControls"
+            class="py-2 px-2 md:px-5 md:py-4 flex flex-col md:flex-row gap-2 justify-between items-center"
+          >
+            <div
+              class="fflex"
+              style="flex-grow: 1"
+            >
+              <slot name="header-left-side-start" />
+              <div class="relative w-full md:max-w-[14rem]">
+                <i class="zmdi zmdi-search h-4 absolute top-2 left-2.5 opacity-50" />
+                <i
+                  v-if="search"
+                  class="zmdi zmdi-close h-4 absolute top-2.5 right-3 opacity-50 cursor-pointer"
+                  @click="searchChanged('')"
+                />
+                <input
+                  :value="search"
+                  type="text"
+                  :placeholder="\`\${name ? \`Search for \${name}...\` : 'Search'}\`"
+                  class="text-sm rounded-md px-3 py-1.5 text-gray-900 shadow-sm placeholder:text-gray-400 border border-slate-200 w-full pl-8 bg-slate-50"
+                  @input="searchChanged($event.target.value)"
+                  @keydown.esc="searchChanged('')"
+                >
+              </div>
+              <slot name="header-left-side-end" />
+            </div>
+            <div
+              v-if="data && data.length"
+              class="text-[.9rem] text-slate-500 flex items-center gap-0 w-full md:w-auto whitespace-nowrap"
+            >
+              <button
+                aria-label="Go back"
+                class="hover:text-secondary-500 text-[1.3rem] md:ml-0 -ml-2"
+                :class="{ '!text-slate-200 cursor-default': !canGoBack }"
+                @click="go(-1)"
+              >
+                <i class="zmdi zmdi-chevron-left" />
+              </button>
+              <span>Rows {{ Math.min((page - 1) * LIMIT + 1, total) }}-{{ Math.min(total, page * LIMIT) }} of {{ total }}</span>
+              <button
+                aria-label="Go forward"
+                class="hover:text-secondary-500 text-[1.3rem]"
+                :class="{ '!text-slate-200 cursor-default': !canGoForward }"
+                @click="go(+1)"
+              >
+                <i class="zmdi zmdi-chevron-right" />
+              </button>
+              <div class="md:hidden w-full flex-1" />
+            </div>
+          </div>
+          <div
+            ref="scrollBox"
+            class="overflow-x-auto border-slate-200 relative"
+            :class="{ 'border-t': settings.showHeaderControls}"
+          >
+            <div
+              :class="{ 'opacity-100 !flex': needsRightGradient }"
+              class="bg-gradient-to-r from-transparent to-white absolute right-0 top-0 bottom-0 z-10 w-56 opacity-0 transition-opacity hidden"
+            >
+              <i class="zmdi zmdi-chevron-right absolute top-1/2 right-2 text-[1.5rem] text-slate-400 -translate-y-1/2" />
+            </div>
+            <table
+              ref="tableBox"
+              class="w-full text-[.8rem] md:text-[.9rem] mb-1"
+            >
+              <thead>
+                <tr>
+                  <th
+                    v-if="settings.isRadio"
+                    class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
+                    :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': fixColumns }"
+                    style="width: 20px;"
+                  >
+                  </th>
+                  <th
+                    v-else-if="settings.isRowSelectable"
+                    class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
+                    :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': fixColumns }"
+                  >
+                    <el-checkbox
+                      v-if="settings.isRowSelectable"
+                      size="small"
+                      :value="isAllRowsSelected"
+                      @input="selectAllRows"
+                    />
+                  </th>
+                  <th
+                    v-for="(c,idx) in columns.slice(0, columnNumberLimit)"
+                    class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:first:pl-6 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
+                    :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': fixColumns }"
+                    @click="onHeaderCellClick(idx)"
+                  >
+                    <div class="flex items-center">
+                      <span>{{ c }}</span>
+                      <el-tooltip v-if="columnsSettings[idx] && columnsSettings[idx].tooltip">
+                        <div
+                          slot="content"
+                          v-html="columnsSettings[idx].tooltip"
+                        />
+                        <i
+                          class="zmdi zmdi-info-outline ml5 text-slate-500 text-[12px]"
+                          style="margin-top: -1px;"
+                        />
+                      </el-tooltip>
+                      <span
+                        v-if="!columnsSettings[idx] || !columnsSettings[idx].disableSort"
+                        class="w-[16px] text-[12px] text-secondary-500 ml-1"
+                      >
+                        <i
+                          v-if="sort.column !== idx"
+                          class="zmdi zmdi-sort-amount-asc ml5 opacity-0 group-hover:opacity-100 text-slate-400 transition-opacity"
+                        />
+                        <i
+                          v-if="sort.column === idx && sort.order === 'asc'"
+                          class="zmdi zmdi-sort-amount-asc ml5"
+                        />
+                        <i
+                          v-if="sort.column === idx && sort.order === 'desc'"
+                          class="zmdi zmdi-sort-amount-desc ml5"
+                        />
+                      </span>
+                    </div>
+                    <div
+                      v-if="oneOfRowsHasSubtitle"
+                      class="text-[.7rem] text-slate-500 font-normal text-left"
+                    >
+                      {{ columnsSettings[idx] && columnsSettings[idx].subtitle ? columnsSettings[idx].subtitle : 'ㅤ' }}
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="row in data"
+                  class="border-b border-gray-200 last:border-0 group"
+                  :class="{ 'cursor-pointer': settings.isRowClickable }"
+                  @click="settings.isRowClickable && $emit('row-click', { idx: row.idx, row: row.items, columnsSettings })"
+                >
+                  <td
+                    v-if="settings.isRadio"
+                    class="px-2 md:px-3 py-2 bg-white first:pl-3 last:pr-3 md:last:pr-6 first:text-left cursor-pointer group-hover:bg-slate-50 group"
+                    :class="{ 'first:sticky first:left-0 first:z-10 first:shadow-[inset_-2px_0_0_#dfe6ec]': fixColumns, 'cursor-pointer': settings.isCellClickable }"
+                  >
+                    <el-radio
+                      v-model="selectedRadioIdx"
+                      :label="row.idx"
+                      @input="updateSelectedRadio(row)"
+                      style="width: 20px;"
+                      class="row-radio"
+                    >
+                      <span style="margin-left: -20px; visibility: hidden;">{{ row.idx }}</span>
+                    </el-radio>
+                  </td>
+                  <td
+                    v-else-if="settings.isRowSelectable"
+                    class="row-select-cell px-2 md:px-3 py-2 bg-white first:pl-3 last:pr-3 md:last:pr-6 group-hover:bg-slate-50 group"
+                    :class="{ 'first:sticky first:left-0 first:z-10 first:shadow-[inset_-2px_0_0_#dfe6ec]': fixColumns, 'cursor-pointer': settings.isCellClickable }"
+                  >
+                    <el-checkbox
+                      size="small"
+                      :value="!!selectedRowsById[row.id]"
+                      @input="updateSelectedRows(row)"
+                    />
+                  </td>
+
+                  <td
+                    v-for="(col,idx) in row.items.slice(0, columnNumberLimit)"
+                    class="px-2 md:px-3 py-2 bg-white first:pl-3 last:pr-3 md:first:pl-6 md:last:pr-6 group-hover:bg-slate-50 group"
+                    :class="{ 'first:sticky first:left-0 first:z-10 first:shadow-[inset_-2px_0_0_#dfe6ec]': fixColumns, 'cursor-pointer': settings.isCellClickable }"
+                    @click="settings.isCellClickable && $emit('cell-click', { idx: row.idx, row: row.items , column: idx})"
+                  >
+                    <div
+                      class="flex items-center whitespace-nowrap"
+                      :class="{ 'justify-end': columnsSettings[idx] && columnsSettings[idx].align === 'right' }"
+                    >
+                      <span
+                        v-if="columnsSettings[idx] && columnsSettings[idx].type === 'class'"
+                        class="w-3 h-3 rounded-sm flex mr-1.5 flex-none"
+                        :style="{ backgroundColor: (classesMap[col] || { color: '#00ff00' }).color }"
+                      />
+                      <span v-if="columnsSettings[idx] && columnsSettings[idx].customCell">
+                        <slot
+                          name="cell-content"
+                          :row="row"
+                          :cell-value="col"
+                          :column="columns[idx]"
+                          :idx="idx"
+                        />
+                      </span>
+                      <el-tooltip
+                        v-else-if="columnsSettings[idx] && columnsSettings[idx].maxWidth"
+                        :enterable="false"
+                        :open-delay="300"
+                      >
+                        <span
+                          slot="content"
+                          v-html="col"
+                        />
+                        <span
+                          class="ellipsis"
+                          :style="{ 'max-width': columnsSettings[idx].maxWidth }"
+                          v-html="highlight(col)"
+                        />
+                      </el-tooltip>
+                      <span
+                        v-else
+                        v-html="highlight(col)"
+                      />
+                      <span
+                        v-if="col != '' && columnsSettings[idx] && columnsSettings[idx].postfix"
+                        class="text-slate-400 ml-0.5 text-[.7rem]"
+                      >{{ columnsSettings[idx].postfix }}</span>
+                      <span
+                        v-if="idx === 0 && settings.isRowClickable"
+                        class="opacity-0 transition-all duration-300 text-secondary-500 text-xs group-hover:translate-x-2 group-hover:opacity-100"
+                      >➔</span>
+                    </div>
+                    <div
+                      v-if="columnsSettings[idx] && columnsSettings[idx].type === 'class'"
+                      class="text-[.6rem] text-slate-500 pl-[1.2rem]"
+                    >
+                      {{ (classesMap[col] && classesMap[col].shape ? classesMap[col].shape : 'Unknown').replace('bitmap', 'mask') }}
+                    </div>
+                    <div
+                      v-if="columnsSettings[idx] && columnsSettings[idx].maxValue"
+                      class="h-[2px] bg-slate-200 mt-0.5 w-[50px]"
+                    >
+                      <div
+                        class="h-[2px] bg-secondary-500"
+                        :style="{ width: col * 100 / columnsSettings[idx].maxValue + '%' }"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              v-if="!data || !data.length"
+              class="text-[.9rem] text-center text-slate-500 mt-5 mb-5"
+            >
+              😭 Nothing is found
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  
   props: {
     data: {
       type: Array,
@@ -40,62 +298,97 @@ Vue.component('fast-table', {
       type: String,
       default: '',
     },
-    showHeader: {
+    selectedRows: {
+      type: Array,
+      default: () => [],
+    },
+    selectedRadioIdx: {
+      type: Number,
+      default: 0,
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    disabled: {
       type: Boolean,
-      default: true,
+      default: false,
     },
   },
+
   data() {
     return {
-      columnNumberLimit: 15,
+      columnNumberLimit: 50,
     };
   },
+
   computed: {
     canGoBack() {
       return this.page - 1 > 0;
     },
+
     canGoForward() {
       return this.page * this.LIMIT < this.total;
     },
+
+    fixColumns() {
+      if (!this.settings?.fixColumns) return 0;
+
+      if (this.settings?.isRowSelectable) return this.settings.fixColumns + 1;
+
+      return this.settings.fixColumns;
+    },
+
     settings() {
+      const defaultSettings = {
+        showHeaderControls: true,
+      };
       return {
+        ...defaultSettings,
         ...(this.options || {}),
       };
     },
+
     LIMIT() {
       return this.pageSize || 50;
     },
+
+    selectedRowsById() {
+      return _.keyBy(this.selectedRows, 'id');
+    },
+
     classesMap() {
       return this.projectMeta ? _.keyBy(this.projectMeta.classes, 'title') : {};
     },
+
     needsRightGradient() {
       return false;
     },
+
     columnsSettings() {
       return this.columnsOptions || Array(this.columns.length || 0).fill({});
     },
+
     oneOfRowsHasSubtitle() {
       return this.columnsSettings.find(i => i?.subtitle);
     },
+
+    isAllRowsSelected() {
+      if (!this.selectedRows?.length) return false;
+      return this.data.every(r => this.selectedRowsById[r.id]);
+    },
   },
-  watch: {
-    // scrollX() {
-    //   if (this.scrollX.value > 0 && columnNumberLimit.value !== 99999) columnNumberLimit.value = 99999;
-    // },
-  },
-  mounted() {
-  },
-  created() {
-    this.updateData = _.throttle(this._updateData, 200);
-  },
+
   methods: {
     _updateData() {
       this.$emit('filters-changed');
     },
+
     searchChanged(val) {
       this.$emit('update:search', val);
       this.updateData();
     },
+
     go(dir) {
       if (dir === -1 && !this.canGoBack) return;
       if (dir === +1 && !this.canGoForward) return;
@@ -103,7 +396,10 @@ Vue.component('fast-table', {
       this.$emit('update:page', this.page + dir);
       this.updateData();
     },
+
     onHeaderCellClick(idx) {
+      if (this.columnsSettings?.[idx]?.disableSort) return;
+
       let order = this.sort.order;
 
       if (this.sort.column !== idx) order = 'asc';
@@ -112,90 +408,62 @@ Vue.component('fast-table', {
       this.$emit('update:sort', { order, column: idx });
       this.updateData();
     },
+
+    selectAllRows() {
+      if (this.isAllRowsSelected) {
+        const curRowsSet = new Set(this.data.map(r => r.id));
+        this.$emit('update:selected-rows', [...this.selectedRows.filter(r => !curRowsSet.has(r.id))]);
+      } else {
+        const selected = [...this.selectedRows];
+
+        this.data.forEach((row) => {
+          if (this.selectedRowsById[row.id]) return;
+
+          selected.push(row);
+        });
+
+        this.$emit('update:selected-rows', selected);
+      }
+    },
+
+    updateSelectedRows(row) {
+      const isRowSelected = this.selectedRowsById[row.id];
+
+      if (!isRowSelected) {
+        this.$emit('update:selected-rows', [...this.selectedRows, row]);
+      } else {
+        this.$emit('update:selected-rows', [...this.selectedRows.filter(p => p.id !== row.id)]);
+      }
+    },
+
+    updateSelectedRadio(row) {
+      console.log('updateSelectedRadio', row);
+      row = _.cloneDeep(row)
+      this.$emit('update:selected-rows', [row])
+    },
+
+    handleScroll() {
+      const scrollX = this.$refs.scrollBox.scrollLeft;
+      if (scrollX > 0 && this.columnNumberLimit !== 99999) {
+        this.columnNumberLimit = 99999;
+      }
+    },
+
     highlight(text) {
       if (!this.search) return text;
-      return text.toString().replace(new RegExp(this.search, 'gi'), match => `<span class="bg-yellow-400">${match}</span>`);
+      return text.toString().replace(new RegExp(this.search, 'gi'), match => '<span class="bg-yellow-400">'+match+'</span>');
     },
   },
-  template: `
- <div class="tailwind fast-table">
-    <div class="rounded-lg border border-slate-200 shadow bg-white" ref="wrapper">
-      <div v-if ="showHeader === true" class="py-2 px-2 md:px-5 md:py-4 flex flex-col md:flex-row gap-2 justify-between items-center">
-        <div class="relative w-full md:max-w-[18rem]">
-          <i class="zmdi zmdi-search h-4 absolute top-2 left-2.5 opacity-50"></i>
-          <!--<img alt="Search" src="~assets/icons/search.png" class="h-4 absolute top-2 left-2.5 opacity-50" />
-          <img alt="Close" src="~assets/icons/close-light.svg" class="h-4 absolute top-2.5 right-3 opacity-50 cursor-pointer" v-if="search" @click="searchChanged('')" />
-          -->
-          <i class="zmdi zmdi-close h-4 absolute top-2.5 right-3 opacity-50 cursor-pointer" v-if="search" @click="searchChanged('')"></i>
-          <input :value="search" @input="searchChanged($event.target.value)" type="text" placeholder="Search" class="text-sm rounded-md px-3 py-1.5 text-gray-900 shadow-sm placeholder:text-gray-400 border border-slate-200 w-full pl-8 bg-slate-50" @keydown.esc="searchChanged('')" />
-        </div>
-        <div class="text-[.9rem] text-slate-500 flex items-center gap-0 w-full md:w-auto whitespace-nowrap" v-if="(data?.length)">
-          <button aria-label="Go back" @click="go(-1)" class="hover:text-secondary-500 text-[1.3rem] md:ml-0 -ml-2" :class="{ '!text-slate-200 cursor-default': !canGoBack }"><i class="zmdi zmdi-chevron-left" /></button>
-          <span>Rows {{ Math.min((page - 1) * LIMIT + 1, total)  }}-{{ Math.min(total, page * LIMIT) }} of {{ total }}</span>
-          <button aria-label="Go forward" @click="go(+1)" class="hover:text-secondary-500 text-[1.3rem]" :class="{ '!text-slate-200 cursor-default': !canGoForward }"><i class="zmdi zmdi-chevron-right" /></button>
-          <div class="md:hidden w-full flex-1"></div>
-        </div>
-      </div>
-      <div class="overflow-x-auto border-t border-slate-200 relative" ref="scrollBox">
-        <div :class="{ 'opacity-100 !flex': needsRightGradient }" class="bg-gradient-to-r from-transparent to-white absolute right-0 top-0 bottom-0 z-10 w-56 opacity-0 transition-opacity hidden">
-          <i class="zmdi zmdi-chevron-right absolute top-1/2 right-2 text-[1.5rem] text-slate-400 -translate-y-1/2" />
-        </div>
-        <table class="w-full text-[.8rem] md:text-[.9rem] mb-1" ref="tableBox">
-          <thead>
-            <tr>
-              <th
-                v-for="(c,idx) in columns.slice(0, columnNumberLimit)"
-                class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:first:pl-6 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
-                :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': settings.fixColumns }"
-                @click="onHeaderCellClick(idx)"
-              >
-                <div class="flex items-center">
-                  <span>{{ c }}</span>
-                  <el-tooltip v-if="columnsSettings[idx]?.tooltip">
-                    <div slot="content" v-html="columnsSettings[idx].tooltip" />
-                    <i class="zmdi zmdi-info-outline ml5 text-slate-500 text-[12px]" />
-                  </el-tooltip>
-                  <span class="w-[16px] text-[12px] text-secondary-500 ml-1">
-                    <i class="zmdi zmdi-sort-amount-asc ml5 opacity-0 group-hover:opacity-100 text-slate-400 transition-opacity" v-if="sort.column !== idx" />
-                    <i class="zmdi zmdi-sort-amount-asc ml5" v-if="sort.column === idx && sort.order === 'asc'" />
-                    <i class="zmdi zmdi-sort-amount-desc ml5" v-if="sort.column === idx && sort.order === 'desc'" />
-                  </span>
-                </div>
-                <div class="text-[.7rem] text-slate-500 font-normal text-left" v-if="oneOfRowsHasSubtitle">
-                  {{ columnsSettings[idx]?.subtitle || 'ㅤ' }}
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in data" class="border-b border-gray-200 last:border-0 group" :class="{ 'cursor-pointer': settings.isRowClickable }" @click="settings.isRowClickable && $emit('row-click', { idx: row.idx, row: row.items })">
-              <td                
-                v-for="(col,idx) in row.items.slice(0, columnNumberLimit)"
-                class="px-2 md:px-3 py-2 bg-white first:pl-3 last:pr-3 md:first:pl-6 md:last:pr-6 group-hover:bg-slate-50 group"
-                :class="{ 'first:sticky first:left-0 first:z-10 first:shadow-[inset_-2px_0_0_#dfe6ec]': settings.fixColumns, 'cursor-pointer': settings.isCellClickable }"
-                @click="settings.isCellClickable && $emit('cell-click', { idx: row.idx, row: row.items , column: idx})"
-              >
-                <div class="flex items-center whitespace-nowrap">
-                  <span v-if="columnsSettings[idx]?.type === 'class'" class="w-3 h-3 rounded-sm flex mr-1.5 flex-none" :style="{ backgroundColor: (classesMap[col] || { color: '#00ff00' }).color }"></span>
-                  <span v-html="highlight(col)"></span>
-                  <span v-if="idx === 0 && settings.isRowClickable" class="opacity-0 transition-all duration-300 text-secondary-500 text-xs group-hover:translate-x-2 group-hover:opacity-100">➔</span>
-                  <span class="text-slate-400 ml-0.5 text-[.7rem]" v-if="col != '' && columnsSettings[idx]?.postfix">{{ columnsSettings[idx].postfix }}</span>
-                </div>
-                <div v-if="columnsSettings[idx]?.type === 'class'" class="text-[.6rem] text-slate-500 pl-[1.2rem]">
-                  {{ (classesMap[col]?.shape || 'Unknown').replace('bitmap', 'mask') }}
-                </div>
-                <div v-if="columnsSettings[idx]?.maxValue" class="h-[2px] bg-slate-200 mt-0.5 w-[50px]">
-                  <div class="h-[2px] bg-secondary-500" :style="{ width: col * 100 / columnsSettings[idx].maxValue + '%' }" />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="!(data?.length)" class="text-[.9rem] text-center text-slate-500 mt-5 mb-5">
-          😭 Nothing is found
-        </div>
-      </div>
-    </div>
-  </div> 
-  `,
-});
+
+  mounted() {
+    this.$refs.scrollBox.addEventListener('scroll', this.handleScroll);
+  },
+
+  beforeDestroy() {
+    this.$refs.scrollBox.addEventListener('scroll', this.handleScroll);
+  },
+
+  created() {
+      this.updateData = _.debounce(this._updateData, 300);
+  },
+});

supervisely/app/widgets/fast_table/style.css

@@ -693,4 +693,28 @@
 	 .tailwind .md\:last\:pr-6:last-child {
 		 padding-right: 1.5rem;
 	}
+}
+
+.ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.row-radio .el-radio__inner {
+	border-width: 1px;
+}
+
+.header-left-side-start-cls {
+	color: black;
+}
+
+.sly-fast-table-disable-overlay {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	z-index: 2000;
+	background-color: rgba(227, 230, 236, 0.5);
+	border-radius: 0.5rem;
 }

supervisely/app/widgets/fast_table/template.html

@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="./sly/css/app/widgets/fast_table/style.css" />
 
-<fast-table
+<fast-table 
   style="width: {{{widget._width}}}"
   :page.sync="state.{{{widget.widget_id}}}.page"
   :total="data.{{{widget.widget_id}}}.total"
@@ -13,6 +13,13 @@
   :search.sync="state.{{{widget.widget_id}}}.search"
   :data="data.{{{widget.widget_id}}}.data"
   :show-header="data.{{{widget.widget_id}}}.showHeader"
+  :selected-rows="state.{{{widget.widget_id}}}.selectedRows"
+  :selected-radio-idx="state.{{{widget.widget_id}}}.selectedRows && state.{{{widget.widget_id}}}.selectedRows.length > 0 ? state.{{{widget.widget_id}}}.selectedRows[0].idx : null"
+  :disabled="data.{{{widget.widget_id}}}.disabled"
+  @update:selected-rows="(rows) => {
+    state.{{{widget.widget_id}}}.selectedRows = rows;
+    data.{{{widget.widget_id}}}.selectionChangedHandled && post('/{{{widget.widget_id}}}/selection_changed_cb');
+  }"
   {%
   if
   widget._row_click_handled
@@ -29,5 +36,38 @@
   {%
   endif
   %}
-  @filters-changed="post('/{{{widget.widget_id}}}/update_data_cb')"
-/>
+  @filters-changed="state.reactToChanges = false; post('/{{{widget.widget_id}}}/update_data_cb');"
+>
+  {% if widget._header_left_content %}
+  <span slot="header-left-side-start" class="header-left-side-start-cls">
+    <div style="padding-right: 10px">
+      {{{ widget._header_left_content }}}
+    </div>
+  </span>
+  {% endif %}
+  {% if widget._header_right_content %}
+  <span slot="header-left-side-end" class="header-right-side-end-cls">
+    <div style="padding-left: 10px">
+      {{{ widget._header_right_content }}}
+    </div>
+  </span>
+  {% endif %}
+  <span slot="cell-content" slot-scope="{ row, column, cellValue, idx }">
+    {% for column_data in widget._columns_data %}
+    {% if column_data.is_widget %}
+    <div 
+      v-if="column === '{{{ column_data.name }}}'"
+      :class="data.{{{widget.widget_id}}}.columnsOptions?.[{{{ loop.index0 }}}]?.classes || ''" JINJA TEMPLATE
+      :style="data.{{{widget.widget_id}}}.columnsOptions?.[{{{ loop.index0 }}}]?.style || ''"
+      @click.native.stop
+    >
+      {{{ column_data.widget_html }}}
+    </div>
+    {% else %}
+    <div v-if="column === '{{{ column_data.name }}}'">
+      <span v-html="highlight(col)"></span>
+    </div>
+    {% endif %}
+    {% endfor %}
+  </span>
+</fast-table>

supervisely/app/widgets/radio_table/radio_table.py

@@ -1,6 +1,7 @@
-from typing import List, Dict, Union
-from supervisely.app.jinja2 import create_env
+from typing import Dict, List, Union
+
 from supervisely.app.content import DataJson, StateJson
+from supervisely.app.jinja2 import create_env
 from supervisely.app.widgets import Widget
 
 
@@ -154,3 +155,10 @@ class RadioTable(Widget):
             raise ValueError(f'Row with index "{row_index}" does not exist')
         StateJson()[self.widget_id]["selectedRow"] = row_index
         StateJson().send_changes()
+
+    def select_row_by_value(self, column, value):
+        for idx, row in enumerate(self._rows):
+            if row[self._columns.index(column)] == value:
+                self.select_row(idx)
+                return
+        raise ValueError(f'Value "{value}" not found in column "{column}"')

supervisely/app/widgets/select/select.py

@@ -1,7 +1,9 @@
 from __future__ import annotations
-from supervisely.app import StateJson, DataJson
-from supervisely.app.widgets import Widget, ConditionalWidget
-from typing import List, Dict, Optional
+
+from typing import Dict, List, Optional
+
+from supervisely.app import DataJson, StateJson
+from supervisely.app.widgets import ConditionalWidget, Widget
 
 try:
     from typing import Literal
@@ -183,7 +185,7 @@ class Select(ConditionalWidget):
         self._changes_handled = True
 
         @server.post(route_path)
-        async def _click():
+        def _click():
             res = self.get_value()
             func(res)