diff --git a/app/components/form/table-settings.hbs b/app/components/form/table-settings.hbs
new file mode 100644
index 0000000..e09331a
--- /dev/null
+++ b/app/components/form/table-settings.hbs
@@ -0,0 +1,37 @@
+<Form::Element
+  @label={{@label}}
+  @for={{this.id}}
+  @required={{@required}}
+  @helper={{@helper}}
+  ...attributes
+>
+  <Menu as |menu|>
+    <menu.Button as |menuButton|>
+      <Button @onClick={{menuButton.toggleMenu}} class='w-auto'>
+        <Icons::CogOutline />
+      </Button>
+    </menu.Button>
+
+    <menu.Items
+      class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
+      {{sortable-group onChange=@onChangeSort}}
+    >
+      {{#each @items as |item|}}
+        {{!-- @ts-ignore --}}
+        <div
+          class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+          {{sortable-item model=item}}
+        >
+          <Icons::DragVertical {{sortable-handle}} class='mr-2 cursor-move' />
+          {{! @ts-ignore }}
+          <Form::Checkbox
+            @checked={{this.args.isItemChecked item}}
+            @label={{namelize item}}
+            @onChange={{fn @onToggleItem item}}
+            class='w-full whitespace-nowrap'
+          />
+        </div>
+      {{/each}}
+    </menu.Items>
+  </Menu>
+</Form::Element>
diff --git a/app/components/form/table-settings.js b/app/components/form/table-settings.js
new file mode 100644
index 0000000..de3e8d5
--- /dev/null
+++ b/app/components/form/table-settings.js
@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+
+export default class FormTableSettingsComponent extends Component {
+  get guid() {
+    return guidFor(this);
+  }
+
+  get id() {
+    return this.args.id ?? this.guid;
+  }
+
+  // @action
+  // onChange(event) {
+  //   if (this.args.onChange) {
+  //     this.args.onChange(event.target.value, event);
+  //   }
+  // }
+}
diff --git a/app/components/icons/eye-off-outline.js b/app/components/icons/eye-off-outline.js
new file mode 100644
index 0000000..86f2670
--- /dev/null
+++ b/app/components/icons/eye-off-outline.js
@@ -0,0 +1 @@
+export { EyeOffOutline as default } from 'ember-mdi';
diff --git a/app/components/icons/eye-outline.js b/app/components/icons/eye-outline.js
new file mode 100644
index 0000000..0e76fe5
--- /dev/null
+++ b/app/components/icons/eye-outline.js
@@ -0,0 +1 @@
+export { EyeOutline as default } from 'ember-mdi';
diff --git a/app/controllers/admin/indexes/item/documents/index.js b/app/controllers/admin/indexes/item/documents/index.js
index e693632..9fa13f0 100644
--- a/app/controllers/admin/indexes/item/documents/index.js
+++ b/app/controllers/admin/indexes/item/documents/index.js
@@ -41,6 +41,12 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
     }
   }
 
+  get allAttributes() {
+    return this.attributes.concat(
+      this.originalAttributes.filter((item) => !this.attributes.includes(item))
+    );
+  }
+
   get fromHits() {
     return 1 + this.model.data.offset;
   }
@@ -85,4 +91,14 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
       this.sort = `${newSort}:asc`;
     }
   }
+
+  @action
+  isItemChecked(item) {
+    return this.attributes.includes(item);
+  }
+
+  @action
+  sortAttibutes(items) {
+    this.attributesToRetrieve = items.filter(this.isItemChecked);
+  }
 }
diff --git a/app/templates/admin/indexes/item/documents/index.hbs b/app/templates/admin/indexes/item/documents/index.hbs
index 2c22918..2b8868e 100644
--- a/app/templates/admin/indexes/item/documents/index.hbs
+++ b/app/templates/admin/indexes/item/documents/index.hbs
@@ -38,55 +38,13 @@
   />
 
   {{! table settings }}
-  <div class='relative mb-4 sm:ml-4 sm:flex-none'>
-    <Menu as |menu|>
-      <menu.Button as |menuButton|>
-        <Button @onClick={{menuButton.toggleMenu}} class='w-auto'>
-          <Icons::CogOutline />
-        </Button>
-      </menu.Button>
-
-      <menu.Items
-        class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
-        {{sortable-group onChange=(set this 'attributesToRetrieve')}}
-      >
-        {{#each this.attributes as |item|}}
-          <div
-            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
-            {{sortable-item model=item}}
-          >
-            <Icons::DragVertical
-              {{sortable-handle}}
-              class='mr-2 cursor-move'
-            />
-            <Form::Checkbox
-              @checked={{includes item this.attributes}}
-              @label={{namelize item}}
-              @onChange={{fn this.toggleAttribute item}}
-              class='w-full whitespace-nowrap'
-            />
-          </div>
-        {{/each}}
-        {{#each this.originalAttributes as |item|}}
-          {{#if (not (includes item this.attributes))}}
-            <div
-              class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
-            >
-              <Icons::DragVertical
-                class='mr-2 cursor-not-allowed'
-              />
-              <Form::Checkbox
-                @checked={{includes item this.attributes}}
-                @label={{namelize item}}
-                @onChange={{fn this.toggleAttribute item}}
-                class='w-full whitespace-nowrap'
-              />
-            </div>
-          {{/if}}
-        {{/each}}
-      </menu.Items>
-    </Menu>
-  </div>
+  <Form::TableSettings
+    @onChangeSort={{this.sortAttibutes}}
+    @items={{this.allAttributes}}
+    @isItemChecked={{this.isItemChecked}}
+    @onToggleItem={{this.toggleAttribute}}
+    class='sm:ml-4 sm:flex-none'
+  />
 </div>
 
 {{!-- <div class='flex items-center mb-4'>
diff --git a/tests/integration/components/form/table-settings-test.js b/tests/integration/components/form/table-settings-test.js
new file mode 100644
index 0000000..239c3a6
--- /dev/null
+++ b/tests/integration/components/form/table-settings-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/table-settings', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Form::TableSettings />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Form::TableSettings>
+        template block text
+      </Form::TableSettings>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});