diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2293442e58ac4e775d271afc9c9d06a8feca2d8
--- /dev/null
+++ b/src/components/OXCell.vue
@@ -0,0 +1,16 @@
+<template>
+  <div @click="clickCell">{{ player }}</div>
+</template>
+<script>
+export default {
+  props: ['player', 'row', 'col'],
+  methods: {
+    clickCell (event) {
+      console.log(event)
+      console.log('click ' + this.row + ' ' + this.col)
+      this.$emit('cell-click', this.row, this.col)
+    }
+  }
+}
+</script>
+<style></style>
diff --git a/src/components/OXTable.vue b/src/components/OXTable.vue
index 87c1ba547b2dd90102dde99187944cbb75457cd1..4703a91b02eaf60f37174547fe0e71e55175709f 100644
--- a/src/components/OXTable.vue
+++ b/src/components/OXTable.vue
@@ -1,25 +1,36 @@
 <template>
   <div>
     <table>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
-      </tr>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
-      </tr>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
+      <tr v-for="(line, lineId) in table" :key="lineId">
+        <td v-for="(item, itemId) in line" :key="itemId">
+          <OXCell :player="item" :row="lineId" :col="itemId" @cell-click="cellClick" />
+        </td>
       </tr>
     </table>
   </div>
 </template>
 <script>
-export default {}
+import OXCell from './OXCell.vue'
+export default {
+  data () {
+    return {
+      turn: 'O',
+      table: [
+        ['-', '-', '-'],
+        ['-', '-', '-'],
+        ['-', '-', '-']
+      ]
+    }
+  },
+  methods: {
+    cellClick (row, col) {
+      console.log('Cell click ' + row + ' ' + col)
+      this.table[row][col] = this.turn
+    }
+  },
+  components: {
+    OXCell
+  }
+}
 </script>
 <style></style>