From 3640f313b393cb7c4f5fda404713867cc80f94de Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 28 Jan 2021 12:18:45 +0300
Subject: [PATCH] Enabling configurable columns for all major tables (#2029)

* Configurable columns in Deployments table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in DaemonSets table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in StatefulSets table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in ReplicaSets table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Jobs table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in CronJobs table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Nodes table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in ConfigMaps table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Secrets table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in ResourceQuota table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in LimitRanges table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in HPAs table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in PodDistributionBudget table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Services table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Endpoints table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Ingresses table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in NetworkPolicies table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Storage section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Namespaces table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Events table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Apps section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in Access Control section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Configurable columns in CRDs tables

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+apps-helm-charts/helm-charts.tsx         | 27 +++++++-----
 .../components/+apps-releases/releases.tsx    | 34 ++++++++-------
 .../components/+config-autoscalers/hpa.tsx    | 34 ++++++++-------
 .../+config-limit-ranges/limit-ranges.tsx     | 18 ++++----
 .../components/+config-maps/config-maps.tsx   | 22 +++++-----
 .../pod-disruption-budgets.tsx                | 34 ++++++++-------
 .../resource-quotas.tsx                       | 18 ++++----
 .../components/+config-secrets/secrets.tsx    | 30 ++++++-------
 .../components/+custom-resources/crd-list.tsx | 22 +++++-----
 .../+custom-resources/crd-resources.tsx       | 19 +++++----
 src/renderer/components/+events/events.tsx    | 30 +++++++------
 .../components/+namespaces/namespaces.tsx     | 22 +++++-----
 .../+network-endpoints/endpoints.tsx          | 21 ++++++----
 .../+network-ingresses/ingresses.tsx          | 24 ++++++-----
 .../+network-policies/network-policies.tsx    | 21 ++++++----
 .../components/+network-services/services.tsx | 41 +++++++++---------
 src/renderer/components/+nodes/nodes.tsx      | 42 ++++++++++---------
 .../pod-security-policies.tsx                 | 22 +++++-----
 .../+storage-classes/storage-classes.tsx      | 25 ++++++-----
 .../+storage-volume-claims/volume-claims.tsx  | 34 ++++++++-------
 .../components/+storage-volumes/volumes.tsx   | 29 +++++++------
 .../role-bindings.tsx                         | 22 +++++-----
 .../+user-management-roles/roles.tsx          | 18 ++++----
 .../service-accounts.tsx                      | 18 ++++----
 .../+workloads-cronjobs/cronjobs.tsx          | 35 +++++++++-------
 .../+workloads-daemonsets/daemonsets.tsx      | 25 ++++++-----
 .../+workloads-deployments/deployments.tsx    | 29 +++++++------
 .../components/+workloads-jobs/jobs.tsx       | 25 ++++++-----
 .../+workloads-replicasets/replicasets.tsx    | 30 ++++++-------
 .../+workloads-statefulsets/statefulsets.tsx  | 25 ++++++-----
 30 files changed, 439 insertions(+), 357 deletions(-)

diff --git a/src/renderer/components/+apps-helm-charts/helm-charts.tsx b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
index 8bf5486a55..348ce00969 100644
--- a/src/renderer/components/+apps-helm-charts/helm-charts.tsx
+++ b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
@@ -11,8 +11,11 @@ import { navigation } from "../../navigation";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { SearchInputUrl } from "../input";
 
-enum sortBy {
+enum columnId {
   name = "name",
+  description = "description",
+  version = "version",
+  appVersion = "app-version",
   repo = "repo",
 }
 
@@ -53,13 +56,15 @@ export class HelmCharts extends Component<Props> {
     return (
       <>
         <ItemListLayout
+          isConfigurable
+          tableId="helm_charts"
           className="HelmCharts"
           store={helmChartStore}
           isClusterScoped={true}
           isSelectable={false}
           sortingCallbacks={{
-            [sortBy.name]: (chart: HelmChart) => chart.getName(),
-            [sortBy.repo]: (chart: HelmChart) => chart.getRepository(),
+            [columnId.name]: (chart: HelmChart) => chart.getName(),
+            [columnId.repo]: (chart: HelmChart) => chart.getRepository(),
           }}
           searchFilters={[
             (chart: HelmChart) => chart.getName(),
@@ -74,13 +79,12 @@ export class HelmCharts extends Component<Props> {
             <SearchInputUrl placeholder={`Search Helm Charts`} />
           )}
           renderTableHeader={[
-            { className: "icon" },
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { title: "Description", className: "description" },
-            { title: "Version", className: "version" },
-            { title: "App Version", className: "app-version" },
-            { title: "Repository", className: "repository", sortBy: sortBy.repo },
-
+            { className: "icon", showWithColumn: columnId.name },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Description", className: "description", id: columnId.description },
+            { title: "Version", className: "version", id: columnId.version },
+            { title: "App Version", className: "app-version", id: columnId.appVersion },
+            { title: "Repository", className: "repository", sortBy: columnId.repo, id: columnId.repo },
           ]}
           renderTableContents={(chart: HelmChart) => [
             <figure key="image">
@@ -93,7 +97,8 @@ export class HelmCharts extends Component<Props> {
             chart.getDescription(),
             chart.getVersion(),
             chart.getAppVersion(),
-            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() }
+            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() },
+            { className: "menu" }
           ]}
           detailsItem={this.selectedChart}
           onDetails={this.showDetails}
diff --git a/src/renderer/components/+apps-releases/releases.tsx b/src/renderer/components/+apps-releases/releases.tsx
index 709c6f9bbd..71cf3d954f 100644
--- a/src/renderer/components/+apps-releases/releases.tsx
+++ b/src/renderer/components/+apps-releases/releases.tsx
@@ -14,11 +14,13 @@ import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { HelmReleaseMenu } from "./release-menu";
 import { secretsStore } from "../+config-secrets/secrets.store";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   revision = "revision",
   chart = "chart",
+  version = "version",
+  appVersion = "app-version",
   status = "status",
   updated = "update"
 }
@@ -81,16 +83,18 @@ export class HelmReleases extends Component<Props> {
     return (
       <>
         <ItemListLayout
+          isConfigurable
+          tableId="helm_releases"
           className="HelmReleases"
           store={releaseStore}
           dependentStores={[secretsStore]}
           sortingCallbacks={{
-            [sortBy.name]: (release: HelmRelease) => release.getName(),
-            [sortBy.namespace]: (release: HelmRelease) => release.getNs(),
-            [sortBy.revision]: (release: HelmRelease) => release.getRevision(),
-            [sortBy.chart]: (release: HelmRelease) => release.getChart(),
-            [sortBy.status]: (release: HelmRelease) => release.getStatus(),
-            [sortBy.updated]: (release: HelmRelease) => release.getUpdated(false, false),
+            [columnId.name]: (release: HelmRelease) => release.getName(),
+            [columnId.namespace]: (release: HelmRelease) => release.getNs(),
+            [columnId.revision]: (release: HelmRelease) => release.getRevision(),
+            [columnId.chart]: (release: HelmRelease) => release.getChart(),
+            [columnId.status]: (release: HelmRelease) => release.getStatus(),
+            [columnId.updated]: (release: HelmRelease) => release.getUpdated(false, false),
           }}
           searchFilters={[
             (release: HelmRelease) => release.getName(),
@@ -101,14 +105,14 @@ export class HelmReleases extends Component<Props> {
           ]}
           renderHeaderTitle="Releases"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Chart", className: "chart", sortBy: sortBy.chart },
-            { title: "Revision", className: "revision", sortBy: sortBy.revision },
-            { title: "Version", className: "version" },
-            { title: "App Version", className: "app-version" },
-            { title: "Status", className: "status", sortBy: sortBy.status },
-            { title: "Updated", className: "updated", sortBy: sortBy.updated },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Chart", className: "chart", sortBy: columnId.chart, id: columnId.chart },
+            { title: "Revision", className: "revision", sortBy: columnId.revision, id: columnId.revision },
+            { title: "Version", className: "version", id: columnId.version },
+            { title: "App Version", className: "app-version", id: columnId.appVersion },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
+            { title: "Updated", className: "updated", sortBy: columnId.updated, id: columnId.updated },
           ]}
           renderTableContents={(release: HelmRelease) => {
             const version = release.getVersion();
diff --git a/src/renderer/components/+config-autoscalers/hpa.tsx b/src/renderer/components/+config-autoscalers/hpa.tsx
index 023a28f156..2e2a78fc82 100644
--- a/src/renderer/components/+config-autoscalers/hpa.tsx
+++ b/src/renderer/components/+config-autoscalers/hpa.tsx
@@ -11,13 +11,15 @@ import { Badge } from "../badge";
 import { cssNames } from "../../utils";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  metrics = "metrics",
   minPods = "min-pods",
   maxPods = "max-pods",
   replicas = "replicas",
   age = "age",
+  status = "status"
 }
 
 interface Props extends RouteComponentProps<IHpaRouteParams> {
@@ -37,28 +39,30 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="configuration_hpa"
         className="HorizontalPodAutoscalers" store={hpaStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: HorizontalPodAutoscaler) => item.getName(),
-          [sortBy.namespace]: (item: HorizontalPodAutoscaler) => item.getNs(),
-          [sortBy.minPods]: (item: HorizontalPodAutoscaler) => item.getMinPods(),
-          [sortBy.maxPods]: (item: HorizontalPodAutoscaler) => item.getMaxPods(),
-          [sortBy.replicas]: (item: HorizontalPodAutoscaler) => item.getReplicas()
+          [columnId.name]: (item: HorizontalPodAutoscaler) => item.getName(),
+          [columnId.namespace]: (item: HorizontalPodAutoscaler) => item.getNs(),
+          [columnId.minPods]: (item: HorizontalPodAutoscaler) => item.getMinPods(),
+          [columnId.maxPods]: (item: HorizontalPodAutoscaler) => item.getMaxPods(),
+          [columnId.replicas]: (item: HorizontalPodAutoscaler) => item.getReplicas()
         }}
         searchFilters={[
           (item: HorizontalPodAutoscaler) => item.getSearchFields()
         ]}
         renderHeaderTitle="Horizontal Pod Autoscalers"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Metrics", className: "metrics" },
-          { title: "Min Pods", className: "min-pods", sortBy: sortBy.minPods },
-          { title: "Max Pods", className: "max-pods", sortBy: sortBy.maxPods },
-          { title: "Replicas", className: "replicas", sortBy: sortBy.replicas },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Status", className: "status" },
+          { title: "Name", className: "name", sortBy: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Metrics", className: "metrics", id: columnId.metrics },
+          { title: "Min Pods", className: "min-pods", sortBy: columnId.minPods, id: columnId.minPods },
+          { title: "Max Pods", className: "max-pods", sortBy: columnId.maxPods, id: columnId.maxPods },
+          { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Status", className: "status", id: columnId.status },
         ]}
         renderTableContents={(hpa: HorizontalPodAutoscaler) => [
           hpa.getName(),
diff --git a/src/renderer/components/+config-limit-ranges/limit-ranges.tsx b/src/renderer/components/+config-limit-ranges/limit-ranges.tsx
index 8bb498c1c0..a3b111929a 100644
--- a/src/renderer/components/+config-limit-ranges/limit-ranges.tsx
+++ b/src/renderer/components/+config-limit-ranges/limit-ranges.tsx
@@ -9,7 +9,7 @@ import React from "react";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { LimitRange } from "../../api/endpoints/limit-range.api";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -23,12 +23,14 @@ export class LimitRanges extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="configuration_limitranges"
         className="LimitRanges"
         store={limitRangeStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: LimitRange) => item.getName(),
-          [sortBy.namespace]: (item: LimitRange) => item.getNs(),
-          [sortBy.age]: (item: LimitRange) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: LimitRange) => item.getName(),
+          [columnId.namespace]: (item: LimitRange) => item.getNs(),
+          [columnId.age]: (item: LimitRange) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: LimitRange) => item.getName(),
@@ -36,10 +38,10 @@ export class LimitRanges extends React.Component<Props> {
         ]}
         renderHeaderTitle={"Limit Ranges"}
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(limitRange: LimitRange) => [
           limitRange.getName(),
diff --git a/src/renderer/components/+config-maps/config-maps.tsx b/src/renderer/components/+config-maps/config-maps.tsx
index 128c583fc8..532532bf53 100644
--- a/src/renderer/components/+config-maps/config-maps.tsx
+++ b/src/renderer/components/+config-maps/config-maps.tsx
@@ -9,7 +9,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { IConfigMapsRouteParams } from "./config-maps.route";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   keys = "keys",
@@ -24,12 +24,14 @@ export class ConfigMaps extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="configuration_configmaps"
         className="ConfigMaps" store={configMapsStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: ConfigMap) => item.getName(),
-          [sortBy.namespace]: (item: ConfigMap) => item.getNs(),
-          [sortBy.keys]: (item: ConfigMap) => item.getKeys(),
-          [sortBy.age]: (item: ConfigMap) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: ConfigMap) => item.getName(),
+          [columnId.namespace]: (item: ConfigMap) => item.getNs(),
+          [columnId.keys]: (item: ConfigMap) => item.getKeys(),
+          [columnId.age]: (item: ConfigMap) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: ConfigMap) => item.getSearchFields(),
@@ -37,11 +39,11 @@ export class ConfigMaps extends React.Component<Props> {
         ]}
         renderHeaderTitle="Config Maps"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Keys", className: "keys", sortBy: sortBy.keys },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Keys", className: "keys", sortBy: columnId.keys, id: columnId.keys },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(configMap: ConfigMap) => [
           configMap.getName(),
diff --git a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx
index f0754e0be8..8136225f11 100644
--- a/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx
+++ b/src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx
@@ -7,7 +7,7 @@ import { PodDisruptionBudget } from "../../api/endpoints/poddisruptionbudget.api
 import { KubeObjectDetailsProps, KubeObjectListLayout } from "../kube-object";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   minAvailable = "min-available",
@@ -25,30 +25,32 @@ export class PodDisruptionBudgets extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="configuration_distribution_budgets"
         className="PodDisruptionBudgets"
         store={podDisruptionBudgetsStore}
         sortingCallbacks={{
-          [sortBy.name]: (pdb: PodDisruptionBudget) => pdb.getName(),
-          [sortBy.namespace]: (pdb: PodDisruptionBudget) => pdb.getNs(),
-          [sortBy.minAvailable]: (pdb: PodDisruptionBudget) => pdb.getMinAvailable(),
-          [sortBy.maxUnavailable]: (pdb: PodDisruptionBudget) => pdb.getMaxUnavailable(),
-          [sortBy.currentHealthy]: (pdb: PodDisruptionBudget) => pdb.getCurrentHealthy(),
-          [sortBy.desiredHealthy]: (pdb: PodDisruptionBudget) => pdb.getDesiredHealthy(),
-          [sortBy.age]: (pdb: PodDisruptionBudget) => pdb.getAge(),
+          [columnId.name]: (pdb: PodDisruptionBudget) => pdb.getName(),
+          [columnId.namespace]: (pdb: PodDisruptionBudget) => pdb.getNs(),
+          [columnId.minAvailable]: (pdb: PodDisruptionBudget) => pdb.getMinAvailable(),
+          [columnId.maxUnavailable]: (pdb: PodDisruptionBudget) => pdb.getMaxUnavailable(),
+          [columnId.currentHealthy]: (pdb: PodDisruptionBudget) => pdb.getCurrentHealthy(),
+          [columnId.desiredHealthy]: (pdb: PodDisruptionBudget) => pdb.getDesiredHealthy(),
+          [columnId.age]: (pdb: PodDisruptionBudget) => pdb.getAge(),
         }}
         searchFilters={[
           (pdb: PodDisruptionBudget) => pdb.getSearchFields(),
         ]}
         renderHeaderTitle="Pod Disruption Budgets"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Min Available", className: "min-available", sortBy: sortBy.minAvailable },
-          { title: "Max Unavailable", className: "max-unavailable", sortBy: sortBy.maxUnavailable },
-          { title: "Current Healthy", className: "current-healthy", sortBy: sortBy.currentHealthy },
-          { title: "Desired Healthy", className: "desired-healthy", sortBy: sortBy.desiredHealthy },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Min Available", className: "min-available", sortBy: columnId.minAvailable, id: columnId.minAvailable },
+          { title: "Max Unavailable", className: "max-unavailable", sortBy: columnId.maxUnavailable, id: columnId.maxUnavailable },
+          { title: "Current Healthy", className: "current-healthy", sortBy: columnId.currentHealthy, id: columnId.currentHealthy },
+          { title: "Desired Healthy", className: "desired-healthy", sortBy: columnId.desiredHealthy, id: columnId.desiredHealthy },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(pdb: PodDisruptionBudget) => {
           return [
diff --git a/src/renderer/components/+config-resource-quotas/resource-quotas.tsx b/src/renderer/components/+config-resource-quotas/resource-quotas.tsx
index 1aed2c9d24..5adfef2edc 100644
--- a/src/renderer/components/+config-resource-quotas/resource-quotas.tsx
+++ b/src/renderer/components/+config-resource-quotas/resource-quotas.tsx
@@ -10,7 +10,7 @@ import { resourceQuotaStore } from "./resource-quotas.store";
 import { IResourceQuotaRouteParams } from "./resource-quotas.route";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age"
@@ -25,11 +25,13 @@ export class ResourceQuotas extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="configuration_quotas"
           className="ResourceQuotas" store={resourceQuotaStore}
           sortingCallbacks={{
-            [sortBy.name]: (item: ResourceQuota) => item.getName(),
-            [sortBy.namespace]: (item: ResourceQuota) => item.getNs(),
-            [sortBy.age]: (item: ResourceQuota) => item.metadata.creationTimestamp,
+            [columnId.name]: (item: ResourceQuota) => item.getName(),
+            [columnId.namespace]: (item: ResourceQuota) => item.getNs(),
+            [columnId.age]: (item: ResourceQuota) => item.metadata.creationTimestamp,
           }}
           searchFilters={[
             (item: ResourceQuota) => item.getSearchFields(),
@@ -37,10 +39,10 @@ export class ResourceQuotas extends React.Component<Props> {
           ]}
           renderHeaderTitle="Resource Quotas"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(resourceQuota: ResourceQuota) => [
             resourceQuota.getName(),
diff --git a/src/renderer/components/+config-secrets/secrets.tsx b/src/renderer/components/+config-secrets/secrets.tsx
index f2c88fda58..60158cfb55 100644
--- a/src/renderer/components/+config-secrets/secrets.tsx
+++ b/src/renderer/components/+config-secrets/secrets.tsx
@@ -11,7 +11,7 @@ import { Badge } from "../badge";
 import { secretsStore } from "./secrets.store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   labels = "labels",
@@ -29,14 +29,16 @@ export class Secrets extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="configuration_secrets"
           className="Secrets" store={secretsStore}
           sortingCallbacks={{
-            [sortBy.name]: (item: Secret) => item.getName(),
-            [sortBy.namespace]: (item: Secret) => item.getNs(),
-            [sortBy.labels]: (item: Secret) => item.getLabels(),
-            [sortBy.keys]: (item: Secret) => item.getKeys(),
-            [sortBy.type]: (item: Secret) => item.type,
-            [sortBy.age]: (item: Secret) => item.metadata.creationTimestamp,
+            [columnId.name]: (item: Secret) => item.getName(),
+            [columnId.namespace]: (item: Secret) => item.getNs(),
+            [columnId.labels]: (item: Secret) => item.getLabels(),
+            [columnId.keys]: (item: Secret) => item.getKeys(),
+            [columnId.type]: (item: Secret) => item.type,
+            [columnId.age]: (item: Secret) => item.metadata.creationTimestamp,
           }}
           searchFilters={[
             (item: Secret) => item.getSearchFields(),
@@ -44,13 +46,13 @@ export class Secrets extends React.Component<Props> {
           ]}
           renderHeaderTitle="Secrets"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Labels", className: "labels", sortBy: sortBy.labels },
-            { title: "Keys", className: "keys", sortBy: sortBy.keys },
-            { title: "Type", className: "type", sortBy: sortBy.type },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Labels", className: "labels", sortBy: columnId.labels, id: columnId.labels },
+            { title: "Keys", className: "keys", sortBy: columnId.keys, id: columnId.keys },
+            { title: "Type", className: "type", sortBy: columnId.type, id: columnId.type },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(secret: Secret) => [
             secret.getName(),
diff --git a/src/renderer/components/+custom-resources/crd-list.tsx b/src/renderer/components/+custom-resources/crd-list.tsx
index 8868231235..f8b77c09a9 100644
--- a/src/renderer/components/+custom-resources/crd-list.tsx
+++ b/src/renderer/components/+custom-resources/crd-list.tsx
@@ -19,7 +19,7 @@ export const crdGroupsUrlParam = createPageParam<string[]>({
   defaultValue: [],
 });
 
-enum sortBy {
+enum columnId {
   kind = "kind",
   group = "group",
   version = "version",
@@ -47,14 +47,16 @@ export class CrdList extends React.Component {
   render() {
     const selectedGroups = this.groups;
     const sortingCallbacks = {
-      [sortBy.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
-      [sortBy.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
-      [sortBy.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
-      [sortBy.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
+      [columnId.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
+      [columnId.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
+      [columnId.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
+      [columnId.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
     };
 
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="crd"
         className="CrdList"
         isClusterScoped={true}
         store={crdStore}
@@ -97,11 +99,11 @@ export class CrdList extends React.Component {
           };
         }}
         renderTableHeader={[
-          { title: "Resource", className: "kind", sortBy: sortBy.kind },
-          { title: "Group", className: "group", sortBy: sortBy.group },
-          { title: "Version", className: "version", sortBy: sortBy.group },
-          { title: "Scope", className: "scope", sortBy: sortBy.scope },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Resource", className: "kind", sortBy: columnId.kind, id: columnId.kind },
+          { title: "Group", className: "group", sortBy: columnId.group, id: columnId.group },
+          { title: "Version", className: "version", sortBy: columnId.version, id: columnId.version },
+          { title: "Scope", className: "scope", sortBy: columnId.scope, id: columnId.scope },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(crd: CustomResourceDefinition) => [
           <Link key="link" to={crd.getResourceUrl()} onClick={stopPropagation}>
diff --git a/src/renderer/components/+custom-resources/crd-resources.tsx b/src/renderer/components/+custom-resources/crd-resources.tsx
index e6a7f2aac6..b9008b410d 100644
--- a/src/renderer/components/+custom-resources/crd-resources.tsx
+++ b/src/renderer/components/+custom-resources/crd-resources.tsx
@@ -16,7 +16,7 @@ import { parseJsonPath } from "../../utils/jsonPath";
 interface Props extends RouteComponentProps<ICRDRouteParams> {
 }
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -55,9 +55,9 @@ export class CrdResources extends React.Component<Props> {
     const isNamespaced = crd.isNamespaced();
     const extraColumns = crd.getPrinterColumns(false);  // Cols with priority bigger than 0 are shown in details
     const sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
-      [sortBy.name]: (item: KubeObject) => item.getName(),
-      [sortBy.namespace]: (item: KubeObject) => item.getNs(),
-      [sortBy.age]: (item: KubeObject) => item.metadata.creationTimestamp,
+      [columnId.name]: (item: KubeObject) => item.getName(),
+      [columnId.namespace]: (item: KubeObject) => item.getNs(),
+      [columnId.age]: (item: KubeObject) => item.metadata.creationTimestamp,
     };
 
     extraColumns.forEach(column => {
@@ -66,6 +66,8 @@ export class CrdResources extends React.Component<Props> {
 
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="crd_resources"
         className="CrdResources"
         isClusterScoped={!isNamespaced}
         store={store}
@@ -75,18 +77,19 @@ export class CrdResources extends React.Component<Props> {
         ]}
         renderHeaderTitle={crd.getResourceTitle()}
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          isNamespaced && { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
           ...extraColumns.map(column => {
             const { name } = column;
 
             return {
               title: name,
               className: name.toLowerCase(),
-              sortBy: name
+              sortBy: name,
+              id: name
             };
           }),
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(crdInstance: KubeObject) => [
           crdInstance.getName(),
diff --git a/src/renderer/components/+events/events.tsx b/src/renderer/components/+events/events.tsx
index c4e6920bc8..8e2af5d9a8 100644
--- a/src/renderer/components/+events/events.tsx
+++ b/src/renderer/components/+events/events.tsx
@@ -12,11 +12,13 @@ import { cssNames, IClassName, stopPropagation } from "../../utils";
 import { Icon } from "../icon";
 import { lookupApiLink } from "../../api/kube-api";
 
-enum sortBy {
+enum columnId {
+  message = "message",
   namespace = "namespace",
   object = "object",
   type = "type",
   count = "count",
+  source = "source",
   age = "age",
 }
 
@@ -39,15 +41,17 @@ export class Events extends React.Component<Props> {
     const events = (
       <KubeObjectListLayout
         {...layoutProps}
+        isConfigurable
+        tableId="events"
         className={cssNames("Events", className, { compact })}
         store={eventStore}
         isSelectable={false}
         sortingCallbacks={{
-          [sortBy.namespace]: (event: KubeEvent) => event.getNs(),
-          [sortBy.type]: (event: KubeEvent) => event.involvedObject.kind,
-          [sortBy.object]: (event: KubeEvent) => event.involvedObject.name,
-          [sortBy.count]: (event: KubeEvent) => event.count,
-          [sortBy.age]: (event: KubeEvent) => event.metadata.creationTimestamp,
+          [columnId.namespace]: (event: KubeEvent) => event.getNs(),
+          [columnId.type]: (event: KubeEvent) => event.involvedObject.kind,
+          [columnId.object]: (event: KubeEvent) => event.involvedObject.name,
+          [columnId.count]: (event: KubeEvent) => event.count,
+          [columnId.age]: (event: KubeEvent) => event.metadata.creationTimestamp,
         }}
         searchFilters={[
           (event: KubeEvent) => event.getSearchFields(),
@@ -72,13 +76,13 @@ export class Events extends React.Component<Props> {
           })
         )}
         renderTableHeader={[
-          { title: "Message", className: "message" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Type", className: "type", sortBy: sortBy.type },
-          { title: "Involved Object", className: "object", sortBy: sortBy.object },
-          { title: "Source", className: "source" },
-          { title: "Count", className: "count", sortBy: sortBy.count },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Message", className: "message", id: columnId.message },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Type", className: "type", sortBy: columnId.type, id: columnId.type },
+          { title: "Involved Object", className: "object", sortBy: columnId.object, id: columnId.object },
+          { title: "Source", className: "source", id: columnId.source },
+          { title: "Count", className: "count", sortBy: columnId.count, id: columnId.count },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(event: KubeEvent) => {
           const { involvedObject, type, message } = event;
diff --git a/src/renderer/components/+namespaces/namespaces.tsx b/src/renderer/components/+namespaces/namespaces.tsx
index f097657493..3972f3d180 100644
--- a/src/renderer/components/+namespaces/namespaces.tsx
+++ b/src/renderer/components/+namespaces/namespaces.tsx
@@ -11,7 +11,7 @@ import { INamespacesRouteParams } from "./namespaces.route";
 import { namespaceStore } from "./namespace.store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   labels = "labels",
   age = "age",
@@ -27,12 +27,14 @@ export class Namespaces extends React.Component<Props> {
       <TabLayout>
         <KubeObjectListLayout
           isClusterScoped
+          isConfigurable
+          tableId="namespaces"
           className="Namespaces" store={namespaceStore}
           sortingCallbacks={{
-            [sortBy.name]: (ns: Namespace) => ns.getName(),
-            [sortBy.labels]: (ns: Namespace) => ns.getLabels(),
-            [sortBy.age]: (ns: Namespace) => ns.metadata.creationTimestamp,
-            [sortBy.status]: (ns: Namespace) => ns.getStatus(),
+            [columnId.name]: (ns: Namespace) => ns.getName(),
+            [columnId.labels]: (ns: Namespace) => ns.getLabels(),
+            [columnId.age]: (ns: Namespace) => ns.metadata.creationTimestamp,
+            [columnId.status]: (ns: Namespace) => ns.getStatus(),
           }}
           searchFilters={[
             (item: Namespace) => item.getSearchFields(),
@@ -40,11 +42,11 @@ export class Namespaces extends React.Component<Props> {
           ]}
           renderHeaderTitle="Namespaces"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Labels", className: "labels", sortBy: sortBy.labels },
-            { title: "Age", className: "age", sortBy: sortBy.age },
-            { title: "Status", className: "status", sortBy: sortBy.status },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Labels", className: "labels", sortBy: columnId.labels, id: columnId.labels },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
           ]}
           renderTableContents={(item: Namespace) => [
             item.getName(),
diff --git a/src/renderer/components/+network-endpoints/endpoints.tsx b/src/renderer/components/+network-endpoints/endpoints.tsx
index 3b859c46f3..ce87c14a4a 100644
--- a/src/renderer/components/+network-endpoints/endpoints.tsx
+++ b/src/renderer/components/+network-endpoints/endpoints.tsx
@@ -9,9 +9,10 @@ import { endpointStore } from "./endpoints.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  endpoints = "endpoints",
   age = "age",
 }
 
@@ -23,22 +24,24 @@ export class Endpoints extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="network_endpoints"
         className="Endpoints" store={endpointStore}
         sortingCallbacks={{
-          [sortBy.name]: (endpoint: Endpoint) => endpoint.getName(),
-          [sortBy.namespace]: (endpoint: Endpoint) => endpoint.getNs(),
-          [sortBy.age]: (endpoint: Endpoint) => endpoint.metadata.creationTimestamp,
+          [columnId.name]: (endpoint: Endpoint) => endpoint.getName(),
+          [columnId.namespace]: (endpoint: Endpoint) => endpoint.getNs(),
+          [columnId.age]: (endpoint: Endpoint) => endpoint.metadata.creationTimestamp,
         }}
         searchFilters={[
           (endpoint: Endpoint) => endpoint.getSearchFields()
         ]}
         renderHeaderTitle="Endpoints"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Endpoints", className: "endpoints" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Endpoints", className: "endpoints", id: columnId.endpoints },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(endpoint: Endpoint) => [
           endpoint.getName(),
diff --git a/src/renderer/components/+network-ingresses/ingresses.tsx b/src/renderer/components/+network-ingresses/ingresses.tsx
index adb6c84528..945f2b8f0a 100644
--- a/src/renderer/components/+network-ingresses/ingresses.tsx
+++ b/src/renderer/components/+network-ingresses/ingresses.tsx
@@ -9,9 +9,11 @@ import { ingressStore } from "./ingress.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  loadBalancers ="load-balancers",
+  rules = "rules",
   age = "age",
 }
 
@@ -23,11 +25,13 @@ export class Ingresses extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="network_ingresses"
         className="Ingresses" store={ingressStore}
         sortingCallbacks={{
-          [sortBy.name]: (ingress: Ingress) => ingress.getName(),
-          [sortBy.namespace]: (ingress: Ingress) => ingress.getNs(),
-          [sortBy.age]: (ingress: Ingress) => ingress.metadata.creationTimestamp,
+          [columnId.name]: (ingress: Ingress) => ingress.getName(),
+          [columnId.namespace]: (ingress: Ingress) => ingress.getNs(),
+          [columnId.age]: (ingress: Ingress) => ingress.metadata.creationTimestamp,
         }}
         searchFilters={[
           (ingress: Ingress) => ingress.getSearchFields(),
@@ -35,12 +39,12 @@ export class Ingresses extends React.Component<Props> {
         ]}
         renderHeaderTitle="Ingresses"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "LoadBalancers", className: "loadbalancers" },
-          { title: "Rules", className: "rules" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "LoadBalancers", className: "loadbalancers", id: columnId.loadBalancers },
+          { title: "Rules", className: "rules", id: columnId.rules },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(ingress: Ingress) => [
           ingress.getName(),
diff --git a/src/renderer/components/+network-policies/network-policies.tsx b/src/renderer/components/+network-policies/network-policies.tsx
index d4dc0e2fa9..6899c14558 100644
--- a/src/renderer/components/+network-policies/network-policies.tsx
+++ b/src/renderer/components/+network-policies/network-policies.tsx
@@ -9,9 +9,10 @@ import { INetworkPoliciesRouteParams } from "./network-policies.route";
 import { networkPolicyStore } from "./network-policy.store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  types = "types",
   age = "age",
 }
 
@@ -23,22 +24,24 @@ export class NetworkPolicies extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="network_policies"
         className="NetworkPolicies" store={networkPolicyStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: NetworkPolicy) => item.getName(),
-          [sortBy.namespace]: (item: NetworkPolicy) => item.getNs(),
-          [sortBy.age]: (item: NetworkPolicy) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: NetworkPolicy) => item.getName(),
+          [columnId.namespace]: (item: NetworkPolicy) => item.getNs(),
+          [columnId.age]: (item: NetworkPolicy) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: NetworkPolicy) => item.getSearchFields(),
         ]}
         renderHeaderTitle="Network Policies"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Policy Types", className: "type" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Policy Types", className: "type", id: columnId.types },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(item: NetworkPolicy) => [
           item.getName(),
diff --git a/src/renderer/components/+network-services/services.tsx b/src/renderer/components/+network-services/services.tsx
index 3452c10a68..740e0bfdf1 100644
--- a/src/renderer/components/+network-services/services.tsx
+++ b/src/renderer/components/+network-services/services.tsx
@@ -10,12 +10,13 @@ import { Badge } from "../badge";
 import { serviceStore } from "./services.store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   selector = "selector",
   ports = "port",
   clusterIp = "cluster-ip",
+  externalIp = "external-ip",
   age = "age",
   type = "type",
   status = "status",
@@ -29,16 +30,18 @@ export class Services extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="network_services"
         className="Services" store={serviceStore}
         sortingCallbacks={{
-          [sortBy.name]: (service: Service) => service.getName(),
-          [sortBy.namespace]: (service: Service) => service.getNs(),
-          [sortBy.selector]: (service: Service) => service.getSelector(),
-          [sortBy.ports]: (service: Service) => (service.spec.ports || []).map(({ port }) => port)[0],
-          [sortBy.clusterIp]: (service: Service) => service.getClusterIp(),
-          [sortBy.type]: (service: Service) => service.getType(),
-          [sortBy.age]: (service: Service) => service.metadata.creationTimestamp,
-          [sortBy.status]: (service: Service) => service.getStatus(),
+          [columnId.name]: (service: Service) => service.getName(),
+          [columnId.namespace]: (service: Service) => service.getNs(),
+          [columnId.selector]: (service: Service) => service.getSelector(),
+          [columnId.ports]: (service: Service) => (service.spec.ports || []).map(({ port }) => port)[0],
+          [columnId.clusterIp]: (service: Service) => service.getClusterIp(),
+          [columnId.type]: (service: Service) => service.getType(),
+          [columnId.age]: (service: Service) => service.metadata.creationTimestamp,
+          [columnId.status]: (service: Service) => service.getStatus(),
         }}
         searchFilters={[
           (service: Service) => service.getSearchFields(),
@@ -47,16 +50,16 @@ export class Services extends React.Component<Props> {
         ]}
         renderHeaderTitle="Services"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Type", className: "type", sortBy: sortBy.type },
-          { title: "Cluster IP", className: "clusterIp", sortBy: sortBy.clusterIp, },
-          { title: "Ports", className: "ports", sortBy: sortBy.ports },
-          { title: "External IP", className: "externalIp" },
-          { title: "Selector", className: "selector", sortBy: sortBy.selector },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Status", className: "status", sortBy: sortBy.status },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Type", className: "type", sortBy: columnId.type, id: columnId.type },
+          { title: "Cluster IP", className: "clusterIp", sortBy: columnId.clusterIp, id: columnId.clusterIp },
+          { title: "Ports", className: "ports", sortBy: columnId.ports, id: columnId.ports },
+          { title: "External IP", className: "externalIp", id: columnId.externalIp },
+          { title: "Selector", className: "selector", sortBy: columnId.selector, id: columnId.selector },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
         renderTableContents={(service: Service) => [
           service.getName(),
diff --git a/src/renderer/components/+nodes/nodes.tsx b/src/renderer/components/+nodes/nodes.tsx
index 1ca12343b5..32da6a13db 100644
--- a/src/renderer/components/+nodes/nodes.tsx
+++ b/src/renderer/components/+nodes/nodes.tsx
@@ -17,7 +17,7 @@ import upperFirst from "lodash/upperFirst";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { Badge } from "../badge/badge";
 
-enum sortBy {
+enum columnId {
   name = "name",
   cpu = "cpu",
   memory = "memory",
@@ -135,21 +135,23 @@ export class Nodes extends React.Component<Props> {
     return (
       <TabLayout>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="nodes"
           className="Nodes"
           store={nodesStore} isClusterScoped
           isReady={nodesStore.isLoaded}
           dependentStores={[podsStore]}
           isSelectable={false}
           sortingCallbacks={{
-            [sortBy.name]: (node: Node) => node.getName(),
-            [sortBy.cpu]: (node: Node) => nodesStore.getLastMetricValues(node, ["cpuUsage"]),
-            [sortBy.memory]: (node: Node) => nodesStore.getLastMetricValues(node, ["memoryUsage"]),
-            [sortBy.disk]: (node: Node) => nodesStore.getLastMetricValues(node, ["fsUsage"]),
-            [sortBy.conditions]: (node: Node) => node.getNodeConditionText(),
-            [sortBy.taints]: (node: Node) => node.getTaints().length,
-            [sortBy.roles]: (node: Node) => node.getRoleLabels(),
-            [sortBy.age]: (node: Node) => node.metadata.creationTimestamp,
-            [sortBy.version]: (node: Node) => node.getKubeletVersion(),
+            [columnId.name]: (node: Node) => node.getName(),
+            [columnId.cpu]: (node: Node) => nodesStore.getLastMetricValues(node, ["cpuUsage"]),
+            [columnId.memory]: (node: Node) => nodesStore.getLastMetricValues(node, ["memoryUsage"]),
+            [columnId.disk]: (node: Node) => nodesStore.getLastMetricValues(node, ["fsUsage"]),
+            [columnId.conditions]: (node: Node) => node.getNodeConditionText(),
+            [columnId.taints]: (node: Node) => node.getTaints().length,
+            [columnId.roles]: (node: Node) => node.getRoleLabels(),
+            [columnId.age]: (node: Node) => node.metadata.creationTimestamp,
+            [columnId.version]: (node: Node) => node.getKubeletVersion(),
           }}
           searchFilters={[
             (node: Node) => node.getSearchFields(),
@@ -159,16 +161,16 @@ export class Nodes extends React.Component<Props> {
           ]}
           renderHeaderTitle="Nodes"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "CPU", className: "cpu", sortBy: sortBy.cpu },
-            { title: "Memory", className: "memory", sortBy: sortBy.memory },
-            { title: "Disk", className: "disk", sortBy: sortBy.disk },
-            { title: "Taints", className: "taints", sortBy: sortBy.taints },
-            { title: "Roles", className: "roles", sortBy: sortBy.roles },
-            { title: "Version", className: "version", sortBy: sortBy.version },
-            { title: "Age", className: "age", sortBy: sortBy.age },
-            { title: "Conditions", className: "conditions", sortBy: sortBy.conditions },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "CPU", className: "cpu", sortBy: columnId.cpu, id: columnId.cpu },
+            { title: "Memory", className: "memory", sortBy: columnId.memory, id: columnId.memory },
+            { title: "Disk", className: "disk", sortBy: columnId.disk, id: columnId.disk },
+            { title: "Taints", className: "taints", sortBy: columnId.taints, id: columnId.taints },
+            { title: "Roles", className: "roles", sortBy: columnId.roles, id: columnId.roles },
+            { title: "Version", className: "version", sortBy: columnId.version, id: columnId.version },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+            { title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions },
           ]}
           renderTableContents={(node: Node) => {
             const tooltipId = `node-taints-${node.getId()}`;
diff --git a/src/renderer/components/+pod-security-policies/pod-security-policies.tsx b/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
index 30ec1d6304..a91e0114d6 100644
--- a/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
+++ b/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
@@ -7,7 +7,7 @@ import { podSecurityPoliciesStore } from "./pod-security-policies.store";
 import { PodSecurityPolicy } from "../../api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   volumes = "volumes",
   privileged = "privileged",
@@ -19,14 +19,16 @@ export class PodSecurityPolicies extends React.Component {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="access_roles"
         className="PodSecurityPolicies"
         isClusterScoped={true}
         store={podSecurityPoliciesStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: PodSecurityPolicy) => item.getName(),
-          [sortBy.volumes]: (item: PodSecurityPolicy) => item.getVolumes(),
-          [sortBy.privileged]: (item: PodSecurityPolicy) => +item.isPrivileged(),
-          [sortBy.age]: (item: PodSecurityPolicy) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: PodSecurityPolicy) => item.getName(),
+          [columnId.volumes]: (item: PodSecurityPolicy) => item.getVolumes(),
+          [columnId.privileged]: (item: PodSecurityPolicy) => +item.isPrivileged(),
+          [columnId.age]: (item: PodSecurityPolicy) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: PodSecurityPolicy) => item.getSearchFields(),
@@ -35,11 +37,11 @@ export class PodSecurityPolicies extends React.Component {
         ]}
         renderHeaderTitle="Pod Security Policies"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Privileged", className: "privileged", sortBy: sortBy.privileged },
-          { title: "Volumes", className: "volumes", sortBy: sortBy.volumes },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Privileged", className: "privileged", sortBy: columnId.privileged, id: columnId.privileged },
+          { title: "Volumes", className: "volumes", sortBy: columnId.volumes, id: columnId.volumes },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(item: PodSecurityPolicy) => {
           return [
diff --git a/src/renderer/components/+storage-classes/storage-classes.tsx b/src/renderer/components/+storage-classes/storage-classes.tsx
index ec7e1c8e05..1a8ed346fd 100644
--- a/src/renderer/components/+storage-classes/storage-classes.tsx
+++ b/src/renderer/components/+storage-classes/storage-classes.tsx
@@ -9,10 +9,11 @@ import { IStorageClassesRouteParams } from "./storage-classes.route";
 import { storageClassStore } from "./storage-class.store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   age = "age",
   provisioner = "provision",
+  default = "default",
   reclaimPolicy = "reclaim",
 }
 
@@ -24,13 +25,15 @@ export class StorageClasses extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="storage_classes"
         className="StorageClasses"
         store={storageClassStore} isClusterScoped
         sortingCallbacks={{
-          [sortBy.name]: (item: StorageClass) => item.getName(),
-          [sortBy.age]: (item: StorageClass) => item.metadata.creationTimestamp,
-          [sortBy.provisioner]: (item: StorageClass) => item.provisioner,
-          [sortBy.reclaimPolicy]: (item: StorageClass) => item.reclaimPolicy,
+          [columnId.name]: (item: StorageClass) => item.getName(),
+          [columnId.age]: (item: StorageClass) => item.metadata.creationTimestamp,
+          [columnId.provisioner]: (item: StorageClass) => item.provisioner,
+          [columnId.reclaimPolicy]: (item: StorageClass) => item.reclaimPolicy,
         }}
         searchFilters={[
           (item: StorageClass) => item.getSearchFields(),
@@ -38,12 +41,12 @@ export class StorageClasses extends React.Component<Props> {
         ]}
         renderHeaderTitle="Storage Classes"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Provisioner", className: "provisioner", sortBy: sortBy.provisioner },
-          { title: "Reclaim Policy", className: "reclaim-policy", sortBy: sortBy.reclaimPolicy },
-          { title: "Default", className: "is-default" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Provisioner", className: "provisioner", sortBy: columnId.provisioner, id: columnId.provisioner },
+          { title: "Reclaim Policy", className: "reclaim-policy", sortBy: columnId.reclaimPolicy, id: columnId.reclaimPolicy },
+          { title: "Default", className: "is-default", id: columnId.default },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(storageClass: StorageClass) => [
           storageClass.getName(),
diff --git a/src/renderer/components/+storage-volume-claims/volume-claims.tsx b/src/renderer/components/+storage-volume-claims/volume-claims.tsx
index bb9a4a05a7..e93529b8d2 100644
--- a/src/renderer/components/+storage-volume-claims/volume-claims.tsx
+++ b/src/renderer/components/+storage-volume-claims/volume-claims.tsx
@@ -13,7 +13,7 @@ import { stopPropagation } from "../../utils";
 import { storageClassApi } from "../../api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   pods = "pods",
@@ -31,17 +31,19 @@ export class PersistentVolumeClaims extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="storage_volume_claims"
         className="PersistentVolumeClaims"
         store={volumeClaimStore}
         dependentStores={[podsStore]}
         sortingCallbacks={{
-          [sortBy.name]: (pvc: PersistentVolumeClaim) => pvc.getName(),
-          [sortBy.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(),
-          [sortBy.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()),
-          [sortBy.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
-          [sortBy.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
-          [sortBy.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
-          [sortBy.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp,
+          [columnId.name]: (pvc: PersistentVolumeClaim) => pvc.getName(),
+          [columnId.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(),
+          [columnId.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()),
+          [columnId.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
+          [columnId.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
+          [columnId.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
+          [columnId.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: PersistentVolumeClaim) => item.getSearchFields(),
@@ -49,14 +51,14 @@ export class PersistentVolumeClaims extends React.Component<Props> {
         ]}
         renderHeaderTitle="Persistent Volume Claims"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Storage class", className: "storageClass", sortBy: sortBy.storageClass },
-          { title: "Size", className: "size", sortBy: sortBy.size },
-          { title: "Pods", className: "pods", sortBy: sortBy.pods },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Status", className: "status", sortBy: sortBy.status },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Storage class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
+          { title: "Size", className: "size", sortBy: columnId.size, id: columnId.size },
+          { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
         renderTableContents={(pvc: PersistentVolumeClaim) => {
           const pods = pvc.getPods(podsStore.items);
diff --git a/src/renderer/components/+storage-volumes/volumes.tsx b/src/renderer/components/+storage-volumes/volumes.tsx
index 412093a7ad..6822e3d4f7 100644
--- a/src/renderer/components/+storage-volumes/volumes.tsx
+++ b/src/renderer/components/+storage-volumes/volumes.tsx
@@ -11,10 +11,11 @@ import { volumesStore } from "./volumes.store";
 import { pvcApi, storageClassApi } from "../../api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   storageClass = "storage-class",
   capacity = "capacity",
+  claim = "claim",
   status = "status",
   age = "age",
 }
@@ -27,14 +28,16 @@ export class PersistentVolumes extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="storage_volumes"
         className="PersistentVolumes"
         store={volumesStore} isClusterScoped
         sortingCallbacks={{
-          [sortBy.name]: (item: PersistentVolume) => item.getName(),
-          [sortBy.storageClass]: (item: PersistentVolume) => item.spec.storageClassName,
-          [sortBy.capacity]: (item: PersistentVolume) => item.getCapacity(true),
-          [sortBy.status]: (item: PersistentVolume) => item.getStatus(),
-          [sortBy.age]: (item: PersistentVolume) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: PersistentVolume) => item.getName(),
+          [columnId.storageClass]: (item: PersistentVolume) => item.spec.storageClassName,
+          [columnId.capacity]: (item: PersistentVolume) => item.getCapacity(true),
+          [columnId.status]: (item: PersistentVolume) => item.getStatus(),
+          [columnId.age]: (item: PersistentVolume) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: PersistentVolume) => item.getSearchFields(),
@@ -42,13 +45,13 @@ export class PersistentVolumes extends React.Component<Props> {
         ]}
         renderHeaderTitle="Persistent Volumes"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Storage Class", className: "storageClass", sortBy: sortBy.storageClass },
-          { title: "Capacity", className: "capacity", sortBy: sortBy.capacity },
-          { title: "Claim", className: "claim" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Status", className: "status", sortBy: sortBy.status },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Storage Class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
+          { title: "Capacity", className: "capacity", sortBy: columnId.capacity, id: columnId.capacity },
+          { title: "Claim", className: "claim", id: columnId.claim },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
         renderTableContents={(volume: PersistentVolume) => {
           const { claimRef, storageClassName } = volume.spec;
diff --git a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx b/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
index 3d64562047..f55e781e0e 100644
--- a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
+++ b/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
@@ -10,7 +10,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   bindings = "bindings",
@@ -25,13 +25,15 @@ export class RoleBindings extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="access_role_bindings"
         className="RoleBindings"
         store={roleBindingsStore}
         sortingCallbacks={{
-          [sortBy.name]: (binding: RoleBinding) => binding.getName(),
-          [sortBy.namespace]: (binding: RoleBinding) => binding.getNs(),
-          [sortBy.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
-          [sortBy.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
+          [columnId.name]: (binding: RoleBinding) => binding.getName(),
+          [columnId.namespace]: (binding: RoleBinding) => binding.getNs(),
+          [columnId.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
+          [columnId.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
         }}
         searchFilters={[
           (binding: RoleBinding) => binding.getSearchFields(),
@@ -39,11 +41,11 @@ export class RoleBindings extends React.Component<Props> {
         ]}
         renderHeaderTitle="Role Bindings"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Bindings", className: "bindings", sortBy: sortBy.bindings },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Bindings", className: "bindings", sortBy: columnId.bindings, id: columnId.bindings },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(binding: RoleBinding) => [
           binding.getName(),
diff --git a/src/renderer/components/+user-management-roles/roles.tsx b/src/renderer/components/+user-management-roles/roles.tsx
index 21ad3bdf8a..a990cbfa7e 100644
--- a/src/renderer/components/+user-management-roles/roles.tsx
+++ b/src/renderer/components/+user-management-roles/roles.tsx
@@ -10,7 +10,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleDialog } from "./add-role-dialog";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -25,22 +25,24 @@ export class Roles extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="access_roles"
           className="Roles"
           store={rolesStore}
           sortingCallbacks={{
-            [sortBy.name]: (role: Role) => role.getName(),
-            [sortBy.namespace]: (role: Role) => role.getNs(),
-            [sortBy.age]: (role: Role) => role.metadata.creationTimestamp,
+            [columnId.name]: (role: Role) => role.getName(),
+            [columnId.namespace]: (role: Role) => role.getNs(),
+            [columnId.age]: (role: Role) => role.metadata.creationTimestamp,
           }}
           searchFilters={[
             (role: Role) => role.getSearchFields(),
           ]}
           renderHeaderTitle="Roles"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(role: Role) => [
             role.getName(),
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx b/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
index 37bed40ba9..4ea78904c0 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
+++ b/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
@@ -15,7 +15,7 @@ import { CreateServiceAccountDialog } from "./create-service-account-dialog";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -30,21 +30,23 @@ export class ServiceAccounts extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="access_service_accounts"
           className="ServiceAccounts" store={serviceAccountsStore}
           sortingCallbacks={{
-            [sortBy.name]: (account: ServiceAccount) => account.getName(),
-            [sortBy.namespace]: (account: ServiceAccount) => account.getNs(),
-            [sortBy.age]: (account: ServiceAccount) => account.metadata.creationTimestamp,
+            [columnId.name]: (account: ServiceAccount) => account.getName(),
+            [columnId.namespace]: (account: ServiceAccount) => account.getNs(),
+            [columnId.age]: (account: ServiceAccount) => account.metadata.creationTimestamp,
           }}
           searchFilters={[
             (account: ServiceAccount) => account.getSearchFields(),
           ]}
           renderHeaderTitle="Service Accounts"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(account: ServiceAccount) => [
             account.getName(),
diff --git a/src/renderer/components/+workloads-cronjobs/cronjobs.tsx b/src/renderer/components/+workloads-cronjobs/cronjobs.tsx
index 19d35e4b3a..08b84c0671 100644
--- a/src/renderer/components/+workloads-cronjobs/cronjobs.tsx
+++ b/src/renderer/components/+workloads-cronjobs/cronjobs.tsx
@@ -18,12 +18,13 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { ConfirmDialog } from "../confirm-dialog/confirm-dialog";
 import { Notifications } from "../notifications/notifications";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  schedule = "schedule",
   suspend = "suspend",
   active = "active",
-  lastSchedule = "schedule",
+  lastSchedule = "last-schedule",
   age = "age",
 }
 
@@ -35,15 +36,17 @@ export class CronJobs extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_cronjobs"
         className="CronJobs" store={cronJobStore}
         dependentStores={[jobStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (cronJob: CronJob) => cronJob.getName(),
-          [sortBy.namespace]: (cronJob: CronJob) => cronJob.getNs(),
-          [sortBy.suspend]: (cronJob: CronJob) => cronJob.getSuspendFlag(),
-          [sortBy.active]: (cronJob: CronJob) => cronJobStore.getActiveJobsNum(cronJob),
-          [sortBy.lastSchedule]: (cronJob: CronJob) => cronJob.getLastScheduleTime(),
-          [sortBy.age]: (cronJob: CronJob) => cronJob.metadata.creationTimestamp,
+          [columnId.name]: (cronJob: CronJob) => cronJob.getName(),
+          [columnId.namespace]: (cronJob: CronJob) => cronJob.getNs(),
+          [columnId.suspend]: (cronJob: CronJob) => cronJob.getSuspendFlag(),
+          [columnId.active]: (cronJob: CronJob) => cronJobStore.getActiveJobsNum(cronJob),
+          [columnId.lastSchedule]: (cronJob: CronJob) => cronJob.getLastScheduleTime(),
+          [columnId.age]: (cronJob: CronJob) => cronJob.metadata.creationTimestamp,
         }}
         searchFilters={[
           (cronJob: CronJob) => cronJob.getSearchFields(),
@@ -51,14 +54,14 @@ export class CronJobs extends React.Component<Props> {
         ]}
         renderHeaderTitle="Cron Jobs"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Schedule", className: "schedule" },
-          { title: "Suspend", className: "suspend", sortBy: sortBy.suspend },
-          { title: "Active", className: "active", sortBy: sortBy.active },
-          { title: "Last schedule", className: "last-schedule", sortBy: sortBy.lastSchedule },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Schedule", className: "schedule", id: columnId.schedule },
+          { title: "Suspend", className: "suspend", sortBy: columnId.suspend, id: columnId.suspend },
+          { title: "Active", className: "active", sortBy: columnId.active, id: columnId.active },
+          { title: "Last schedule", className: "last-schedule", sortBy: columnId.lastSchedule, id: columnId.lastSchedule },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(cronJob: CronJob) => [
           cronJob.getName(),
diff --git a/src/renderer/components/+workloads-daemonsets/daemonsets.tsx b/src/renderer/components/+workloads-daemonsets/daemonsets.tsx
index ff061f7877..e2d1e30e17 100644
--- a/src/renderer/components/+workloads-daemonsets/daemonsets.tsx
+++ b/src/renderer/components/+workloads-daemonsets/daemonsets.tsx
@@ -13,10 +13,11 @@ import { IDaemonSetsRouteParams } from "../+workloads";
 import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   pods = "pods",
+  labels = "labels",
   age = "age",
 }
 
@@ -38,13 +39,15 @@ export class DaemonSets extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_daemonsets"
         className="DaemonSets" store={daemonSetStore}
         dependentStores={[podsStore, nodesStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (daemonSet: DaemonSet) => daemonSet.getName(),
-          [sortBy.namespace]: (daemonSet: DaemonSet) => daemonSet.getNs(),
-          [sortBy.pods]: (daemonSet: DaemonSet) => this.getPodsLength(daemonSet),
-          [sortBy.age]: (daemonSet: DaemonSet) => daemonSet.metadata.creationTimestamp,
+          [columnId.name]: (daemonSet: DaemonSet) => daemonSet.getName(),
+          [columnId.namespace]: (daemonSet: DaemonSet) => daemonSet.getNs(),
+          [columnId.pods]: (daemonSet: DaemonSet) => this.getPodsLength(daemonSet),
+          [columnId.age]: (daemonSet: DaemonSet) => daemonSet.metadata.creationTimestamp,
         }}
         searchFilters={[
           (daemonSet: DaemonSet) => daemonSet.getSearchFields(),
@@ -52,12 +55,12 @@ export class DaemonSets extends React.Component<Props> {
         ]}
         renderHeaderTitle="Daemon Sets"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Pods", className: "pods", sortBy: sortBy.pods },
-          { className: "warning" },
-          { title: "Node Selector", className: "labels" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
+          { className: "warning", showWithColumn: columnId.pods },
+          { title: "Node Selector", className: "labels", id: columnId.labels },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(daemonSet: DaemonSet) => [
           daemonSet.getName(),
diff --git a/src/renderer/components/+workloads-deployments/deployments.tsx b/src/renderer/components/+workloads-deployments/deployments.tsx
index b84cd7b340..0147c238b9 100644
--- a/src/renderer/components/+workloads-deployments/deployments.tsx
+++ b/src/renderer/components/+workloads-deployments/deployments.tsx
@@ -23,9 +23,10 @@ import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-obje
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { Notifications } from "../notifications";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  pods = "pods",
   replicas = "replicas",
   age = "age",
   condition = "condition",
@@ -55,14 +56,16 @@ export class Deployments extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_deployments"
         className="Deployments" store={deploymentStore}
         dependentStores={[replicaSetStore, podsStore, nodesStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (deployment: Deployment) => deployment.getName(),
-          [sortBy.namespace]: (deployment: Deployment) => deployment.getNs(),
-          [sortBy.replicas]: (deployment: Deployment) => deployment.getReplicas(),
-          [sortBy.age]: (deployment: Deployment) => deployment.metadata.creationTimestamp,
-          [sortBy.condition]: (deployment: Deployment) => deployment.getConditionsText(),
+          [columnId.name]: (deployment: Deployment) => deployment.getName(),
+          [columnId.namespace]: (deployment: Deployment) => deployment.getNs(),
+          [columnId.replicas]: (deployment: Deployment) => deployment.getReplicas(),
+          [columnId.age]: (deployment: Deployment) => deployment.metadata.creationTimestamp,
+          [columnId.condition]: (deployment: Deployment) => deployment.getConditionsText(),
         }}
         searchFilters={[
           (deployment: Deployment) => deployment.getSearchFields(),
@@ -70,13 +73,13 @@ export class Deployments extends React.Component<Props> {
         ]}
         renderHeaderTitle="Deployments"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Pods", className: "pods" },
-          { title: "Replicas", className: "replicas", sortBy: sortBy.replicas },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Conditions", className: "conditions", sortBy: sortBy.condition },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Pods", className: "pods", id: columnId.pods },
+          { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Conditions", className: "conditions", sortBy: columnId.condition, id: columnId.condition },
         ]}
         renderTableContents={(deployment: Deployment) => [
           deployment.getName(),
diff --git a/src/renderer/components/+workloads-jobs/jobs.tsx b/src/renderer/components/+workloads-jobs/jobs.tsx
index 00c1ee0db5..6301c287d0 100644
--- a/src/renderer/components/+workloads-jobs/jobs.tsx
+++ b/src/renderer/components/+workloads-jobs/jobs.tsx
@@ -12,9 +12,10 @@ import { IJobsRouteParams } from "../+workloads";
 import kebabCase from "lodash/kebabCase";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  completions = "completions",
   conditions = "conditions",
   age = "age",
 }
@@ -27,25 +28,27 @@ export class Jobs extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_jobs"
         className="Jobs" store={jobStore}
         dependentStores={[podsStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (job: Job) => job.getName(),
-          [sortBy.namespace]: (job: Job) => job.getNs(),
-          [sortBy.conditions]: (job: Job) => job.getCondition() != null ? job.getCondition().type : "",
-          [sortBy.age]: (job: Job) => job.metadata.creationTimestamp,
+          [columnId.name]: (job: Job) => job.getName(),
+          [columnId.namespace]: (job: Job) => job.getNs(),
+          [columnId.conditions]: (job: Job) => job.getCondition() != null ? job.getCondition().type : "",
+          [columnId.age]: (job: Job) => job.metadata.creationTimestamp,
         }}
         searchFilters={[
           (job: Job) => job.getSearchFields(),
         ]}
         renderHeaderTitle="Jobs"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Completions", className: "completions" },
-          { className: "warning" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
-          { title: "Conditions", className: "conditions", sortBy: sortBy.conditions },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Completions", className: "completions", id: columnId.completions },
+          { className: "warning", showWithColumn: columnId.completions },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          { title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions },
         ]}
         renderTableContents={(job: Job) => {
           const condition = job.getCondition();
diff --git a/src/renderer/components/+workloads-replicasets/replicasets.tsx b/src/renderer/components/+workloads-replicasets/replicasets.tsx
index 55f607e3c3..fa6ee5cef4 100644
--- a/src/renderer/components/+workloads-replicasets/replicasets.tsx
+++ b/src/renderer/components/+workloads-replicasets/replicasets.tsx
@@ -14,7 +14,7 @@ import { Icon } from "../icon/icon";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 import { ReplicaSetScaleDialog } from "./replicaset-scale-dialog";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   desired = "desired",
@@ -31,27 +31,29 @@ export class ReplicaSets extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_replicasets"
         className="ReplicaSets" store={replicaSetStore}
         sortingCallbacks={{
-          [sortBy.name]: (replicaSet: ReplicaSet) => replicaSet.getName(),
-          [sortBy.namespace]: (replicaSet: ReplicaSet) => replicaSet.getNs(),
-          [sortBy.desired]: (replicaSet: ReplicaSet) => replicaSet.getDesired(),
-          [sortBy.current]: (replicaSet: ReplicaSet) => replicaSet.getCurrent(),
-          [sortBy.ready]: (replicaSet: ReplicaSet) => replicaSet.getReady(),
-          [sortBy.age]: (replicaSet: ReplicaSet) => replicaSet.metadata.creationTimestamp,
+          [columnId.name]: (replicaSet: ReplicaSet) => replicaSet.getName(),
+          [columnId.namespace]: (replicaSet: ReplicaSet) => replicaSet.getNs(),
+          [columnId.desired]: (replicaSet: ReplicaSet) => replicaSet.getDesired(),
+          [columnId.current]: (replicaSet: ReplicaSet) => replicaSet.getCurrent(),
+          [columnId.ready]: (replicaSet: ReplicaSet) => replicaSet.getReady(),
+          [columnId.age]: (replicaSet: ReplicaSet) => replicaSet.metadata.creationTimestamp,
         }}
         searchFilters={[
           (replicaSet: ReplicaSet) => replicaSet.getSearchFields(),
         ]}
         renderHeaderTitle="Replica Sets"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Desired", className: "desired", sortBy: sortBy.desired },
-          { title: "Current", className: "current", sortBy: sortBy.current },
-          { title: "Ready", className: "ready", sortBy: sortBy.ready },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired },
+          { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current },
+          { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(replicaSet: ReplicaSet) => [
           replicaSet.getName(),
diff --git a/src/renderer/components/+workloads-statefulsets/statefulsets.tsx b/src/renderer/components/+workloads-statefulsets/statefulsets.tsx
index 9e6011e156..7c91c9905c 100644
--- a/src/renderer/components/+workloads-statefulsets/statefulsets.tsx
+++ b/src/renderer/components/+workloads-statefulsets/statefulsets.tsx
@@ -17,9 +17,10 @@ import { MenuItem } from "../menu/menu";
 import { Icon } from "../icon/icon";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
+  pods = "pods",
   age = "age",
   replicas = "replicas",
 }
@@ -38,25 +39,27 @@ export class StatefulSets extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_statefulsets"
         className="StatefulSets" store={statefulSetStore}
         dependentStores={[podsStore, nodesStore, eventStore]}
         sortingCallbacks={{
-          [sortBy.name]: (statefulSet: StatefulSet) => statefulSet.getName(),
-          [sortBy.namespace]: (statefulSet: StatefulSet) => statefulSet.getNs(),
-          [sortBy.age]: (statefulSet: StatefulSet) => statefulSet.metadata.creationTimestamp,
-          [sortBy.replicas]: (statefulSet: StatefulSet) => statefulSet.getReplicas(),
+          [columnId.name]: (statefulSet: StatefulSet) => statefulSet.getName(),
+          [columnId.namespace]: (statefulSet: StatefulSet) => statefulSet.getNs(),
+          [columnId.age]: (statefulSet: StatefulSet) => statefulSet.metadata.creationTimestamp,
+          [columnId.replicas]: (statefulSet: StatefulSet) => statefulSet.getReplicas(),
         }}
         searchFilters={[
           (statefulSet: StatefulSet) => statefulSet.getSearchFields(),
         ]}
         renderHeaderTitle="Stateful Sets"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Pods", className: "pods" },
-          { title: "Replicas", className: "replicas", sortBy: sortBy.replicas },
-          { className: "warning" },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Pods", className: "pods", id: columnId.pods },
+          { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          { className: "warning", showWithColumn: columnId.replicas },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(statefulSet: StatefulSet) => [
           statefulSet.getName(),