Added column sorting

src/app/globals.css

@@ -49,6 +49,7 @@ body {
 .editor-toolbar {
   display: flex;
   gap: 0.5rem;
+  position: relative;
 }
 
 .editor-toolbar button {
@@ -63,6 +64,75 @@ body {
   opacity: 0.45;
 }
 
+.column-settings-menu {
+  position: absolute;
+  z-index: 9;
+  margin-top: 2rem;
+  border: 1px solid #cfd7e5;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  padding: 0.45rem;
+  width: 300px;
+}
+
+.column-settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.35rem;
+}
+
+.column-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-height: 340px;
+  overflow: auto;
+}
+
+.column-settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.4rem;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0.2rem 0.25rem;
+}
+
+.column-settings-item.dragging {
+  opacity: 0.55;
+}
+
+.column-settings-item.drop-target {
+  border-color: #2b6cb0;
+  background: #ebf4ff;
+}
+
+.column-settings-item.locked {
+  background: #f7fafc;
+}
+
+.column-settings-item label {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  font-size: 0.8rem;
+}
+
+.column-settings-order {
+  display: flex;
+  gap: 0.2rem;
+}
+
+.column-settings-order button {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  border-radius: 3px;
+  font-size: 0.72rem;
+  padding: 0.08rem 0.28rem;
+}
+
 .tree-grid-wrap {
   overflow: auto;
   border: 1px solid #d9dee8;