1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue b/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue
new file mode 100644
index 00000000000..d54008b81b2
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlTableLite } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import PipelineScheduleActions from './cells/pipeline_schedule_actions.vue';
+import PipelineScheduleLastPipeline from './cells/pipeline_schedule_last_pipeline.vue';
+import PipelineScheduleNextRun from './cells/pipeline_schedule_next_run.vue';
+import PipelineScheduleOwner from './cells/pipeline_schedule_owner.vue';
+import PipelineScheduleTarget from './cells/pipeline_schedule_target.vue';
+
+export default {
+  fields: [
+    {
+      key: 'description',
+      label: s__('PipelineSchedules|Description'),
+      columnClass: 'gl-w-40p',
+    },
+    {
+      key: 'target',
+      label: s__('PipelineSchedules|Target'),
+      columnClass: 'gl-w-10p',
+    },
+    {
+      key: 'pipeline',
+      label: s__('PipelineSchedules|Last Pipeline'),
+      columnClass: 'gl-w-10p',
+    },
+    {
+      key: 'next',
+      label: s__('PipelineSchedules|Next Run'),
+      columnClass: 'gl-w-15p',
+    },
+    {
+      key: 'owner',
+      label: s__('PipelineSchedules|Owner'),
+      columnClass: 'gl-w-10p',
+    },
+    {
+      key: 'actions',
+      label: '',
+      columnClass: 'gl-w-15p',
+    },
+  ],
+  components: {
+    GlTableLite,
+    PipelineScheduleActions,
+    PipelineScheduleLastPipeline,
+    PipelineScheduleNextRun,
+    PipelineScheduleOwner,
+    PipelineScheduleTarget,
+  },
+  props: {
+    schedules: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-table-lite :fields="$options.fields" :items="schedules" stacked="md">
+    <template #table-colgroup="{ fields }">
+      <col v-for="field in fields" :key="field.key" :class="field.columnClass" />
+    </template>
+
+    <template #cell(description)="{ item }">
+      <span data-testid="pipeline-schedule-description">
+        {{ item.description }}
+      </span>
+    </template>
+
+    <template #cell(target)="{ item }">
+      <pipeline-schedule-target :schedule="item" />
+    </template>
+
+    <template #cell(pipeline)="{ item }">
+      <pipeline-schedule-last-pipeline :schedule="item" />
+    </template>
+
+    <template #cell(next)="{ item }">
+      <pipeline-schedule-next-run :schedule="item" />
+    </template>
+
+    <template #cell(owner)="{ item }">
+      <pipeline-schedule-owner :schedule="item" />
+    </template>
+
+    <template #cell(actions)="{ item }">
+      <pipeline-schedule-actions
+        :schedule="item"
+        @showDeleteModal="$emit('showDeleteModal', $event)"
+      />
+    </template>
+  </gl-table-lite>
+</template>