Summary

There appears to be an issue with the Columns component on the Alerts table(s). On page load, the persisted table preferences controlled by that component are not reflected in the Columns component, leading to complicated, confusing UX when interacting with those UI.

Context

I observed the following behaviors when investigating this bug; all of them are correct, save for the last one.

1. ✅ Interaction with the Columns component causes the Alerts table to update and be in sync with the current Columns state (as represented in the Columns component)
2. ✅ Interaction with the Columns component causes the column state (i.e. "column preferences/order") to be persisted to localStorage
3. ✅ On page load, the column state in localStorage is applied to the Alerts table
4. ❌ On page load, the Columns component does not load the column state from localStorage

Steps to Reproduce

1. Generate a Security environment with some Alerts
2. Navigate to an Alerts table (e.g. Security -> Alerts)
3. Open the Columns component and make a change:
   
   
   Here I have moved host.name and user.name after @timestamp
4. Reload the page
5. Observe that the Columns component has been reset:
   
6. (Optional) Observe that the columns are still in the specified order: