diff --git a/ivette/.eslintrc.js b/ivette/.eslintrc.js
index 163e36aee57deb7cfda15a74345bb71c0f2eb006..ebdbbb656e9a0007b96ff7f378c22fd3c3401f78 100644
--- a/ivette/.eslintrc.js
+++ b/ivette/.eslintrc.js
@@ -67,6 +67,8 @@ module.exports = {
     "no-return-assign": ["error", "except-parens" ],
     // Allow single line expressions in react
     "react/jsx-one-expression-per-line": "off",
+    // Allow property spreading since with aim at using TSC
+    "react/jsx-props-no-spreading": "off",
     // Allow all sorts of linebreaking for operators
     "operator-linebreak": "off",
     // Force curly brackets on newline if some item is
diff --git a/ivette/src/renderer/Properties.tsx b/ivette/src/renderer/Properties.tsx
index c17bfe7f81d295327cbd6fd30da2ab7f6b5e5f3f..ad134647ff64177d8ce3c205a9a189d878fc75d6 100644
--- a/ivette/src/renderer/Properties.tsx
+++ b/ivette/src/renderer/Properties.tsx
@@ -7,66 +7,88 @@ import React from 'react';
 import * as States from 'frama-c/states';
 import { Label, Code } from 'dome/controls/labels';
 import { ArrayModel } from 'dome/table/arrays';
-import { Table, DefineColumn } from 'dome/table/views';
+import { Table, Column, ColumnProps, Renderer } from 'dome/table/views';
 import { Component } from 'frama-c/LabViews';
 
 // --------------------------------------------------------------------------
 // --- Property Columns
 // --------------------------------------------------------------------------
 
-const ColumnCode: any =
-  DefineColumn({ renderValue: (text: string) => <Code>{text}</Code> });
+export const renderCode: Renderer<string> =
+  (text: string) => <Code>{text}</Code>;
 
-const ColumnTag: any =
-  DefineColumn({
-    renderValue: (l: { label: string; descr: string }) => (
-      <Label label={l.label} title={l.descr} />
-    ),
-  });
+function ColumnCode<Row>(props: ColumnProps<Row, string>) {
+  return <Column render={renderCode} {...props} />;
+}
+
+interface Tag { name: string; label: string; descr: string }
+
+export const renderTag: Renderer<Tag> =
+  (d: Tag) => <Label label={d.label} title={d.descr} />;
+
+function ColumnTag<Row>(props: ColumnProps<Row, Tag>) {
+  return <Column render={renderTag} {...props} />;
+}
 
 // --------------------------------------------------------------------------
 // --- Properties Table
 // -------------------------------------------------------------------------
 
+interface SourceLoc {
+  file: string;
+  line: number;
+}
+
+interface Property {
+  key: string;
+  descr: string;
+  kind: string;
+  status: string;
+  function: string;
+  kinstr: string;
+  source: SourceLoc;
+}
+
 const RenderTable = () => {
   // Hooks
-  const model = React.useMemo(() => new ArrayModel(), []);
-  const items = States.useSyncArray('kernel.properties');
-  const status = States.useDictionary('kernel.dictionary.propstatus');
-  const [select, setSelect] = States.useSelection();
+  const model =
+    React.useMemo(() => new ArrayModel<Property>('key'), []);
+  const items: { [key: string]: Property } =
+    States.useSyncArray('kernel.properties');
+  const status: { [status: string]: Tag } =
+    States.useDictionary('kernel.dictionary.propstatus');
+  const [select, setSelect] =
+    States.useSelection();
   React.useEffect(() => {
-    model.setData(_.toArray(items));
+    model.replace(_.toArray(items));
   }, [model, items]);
 
   // Callbacks
-  const getStatus = ({ status: st }: any) => status[st] || { label: st };
-  const selection = select ? items[select.marker] : undefined;
-  const onSelection = (item: any) => item && setSelect({
-    marker: item.key,
-    function: item.function,
-  });
+  const getStatus = ({ status: st }: Property) => status[st] || { label: st };
+  const selection = select?.marker;
+  const onSelection = ({ key, function: fct }: Property) => {
+    setSelect({ marker: key, function: fct });
+  };
 
   // Rendering
   return (
-    <>
-      <Table
-        model={model}
-        selection={selection}
-        onSelection={onSelection}
-        scrollToItem={selection}
-      >
-        <ColumnCode id="function" label="Function" width={120} />
-        <ColumnCode id="descr" label="Description" fill />
-        <ColumnTag
-          id="status"
-          label="Status"
-          fixed
-          width={80}
-          align="center"
-          getValue={getStatus}
-        />
-      </Table>
-    </>
+    <Table<string, Property>
+      model={model}
+      selection={selection}
+      onSelection={onSelection}
+      scrollTo={selection}
+    >
+      <ColumnCode id="function" label="Function" width={120} />
+      <ColumnCode id="descr" label="Description" fill />
+      <ColumnTag
+        id="status"
+        label="Status"
+        fixed
+        width={80}
+        align="center"
+        getter={getStatus}
+      />
+    </Table>
   );
 };