Grid Row v1.0

The <e-grid-row> component is a part of the grid component, used for displaying a variety of values.

Usage

An e-grid-row has attributes that must be provided.

<e-grid-row
  :row-data="rowData"
  @click="clickedRow(rowData)"
  @emit-key="emitKey"
/>

Attributes

gridModel | Type: GridData | required
loading | Type: Boolean | Default: false
items | Type: Object[] | Default: []
errors | Type: Object[] | Default: []
queryParameters | Type: QueryParameters | Default: {}
total | Type: Number | Default: 0
page | Type: Number | Default: 0
pagerDisplayOffset | Type: Number | Default: 2

Examples

test 1

test1

test party

party

test party 2

party 2

10/10/20251 second ago

locale

specific column

example text

Source Code

e-grid-row.vue

<script setup lang="ts">
import { computed, inject, unref } from 'vue';
import { includes } from 'lodash-es';

import { ColumnModel, Dictionary } from 'types';
import { RowComponents } from 'types/grid';

export type Props = {
  rowData: Dictionary;
};
const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void;
  (e: 'emit-key', emitKey: string, row: Dictionary, meta: Dictionary): void;
}>();

const gridSize = inject('grid-size', { rowHeight: 40, contentHeight: 0 });
const rowHeight = computed(() => unref(gridSize).rowHeight);

const gridColumns = inject('grid-columns', [] as Array<ColumnModel>);
const columnSet = computed(() => unref(gridColumns));

const rowStyle = computed(() => {
  return {
    height: `${rowHeight.value}px`
  };
});

const row = computed(() => {
  return props.rowData;
});

function getColumnWidth(columnData: ColumnModel) {
  const columnWidth = `${columnData.width}`;

  if (includes(columnWidth, 'px') || columnWidth === 'auto') {
    return columnWidth;
  } else {
    return `${columnWidth || 200}px`;
  }
}

function emitEvent(emitKey: string, functionMeta: Dictionary) {
  emit('emit-key', emitKey, row.value, functionMeta);
}
</script>

<template>
  <div
    class="e-grid-row"
    :style="rowStyle"
  >
    <div
      v-for="(column, columnIndex) in columnSet"
      :key="columnIndex + column.index"
      class="column"
      :class="column.type"
      :style="{
        width: getColumnWidth(column)
      }"
      @click="emit('click', $event)"
    >
      <component
        :is="RowComponents[column.type]"
        v-model="row[column?.key]"
        :options="column.options"
        @emit-key="emitEvent"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.e-grid-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: var(--e-grid-row-background);
  padding: 5px 15px;
  cursor: pointer;
  color: var(--e-gray);
  min-width: fit-content;

  .column,
  .settings-column {
    display: flex;
    padding: 3px 10px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    align-items: center;
  }

  .settings-column {
    flex: 1 1 auto;
  }

  &:nth-child(even) {
    background-color: var(--e-grid-row-even-background);
  }

  > :last-child {
    flex: 1 1 auto;
  }

  &:hover {
    color: var(--e-body-font-color);
    background-color: var(--e-grid-row-hover-background);

    .column {
      background-color: var(--e-grid-row-hover-background);
    }
  }
}
</style>