feat: add optional large table column resizing

styles/42-components-data-display.css

@@ -71,6 +71,10 @@
   width: 100%;
 }
 
+.sg-large-table[data-column-resize="true"] {
+  overflow-x: auto;
+}
+
 .sg-large-table__title-segment {
   flex-direction: row;
   align-items: center;
@@ -80,7 +84,7 @@
 
 .sg-large-table__row {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: var(--large-table-grid-template-columns, repeat(5, minmax(0, 1fr)));
   align-items: stretch;
   gap: 0;
   width: 100%;
@@ -88,6 +92,11 @@
   background: var(--color-white);
 }
 
+.sg-large-table[data-column-resize="true"] .sg-large-table__row,
+.sg-large-table[data-column-resize="true"] .sg-large-table__title-segment {
+  width: max(100%, var(--large-table-grid-min-width, 0px));
+}
+
 .sg-large-table__row--hidden {
   display: none;
 }
@@ -126,9 +135,55 @@
 }
 
 .sg-large-table__cell--header {
+  position: relative;
   padding: 0;
 }
 
+.sg-large-table__resize-handle {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: -0.25rem;
+  bottom: 0;
+  width: 0.5rem;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.sg-large-table__resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: 0.2rem;
+  border-left: 1px solid transparent;
+}
+
+.sg-large-table__resize-handle:hover::after,
+.sg-large-table__resize-handle:focus-visible::after,
+.sg-large-table[data-column-resize-state="resizing"] .sg-large-table__resize-handle[data-large-table-resize-active="true"]::after {
+  border-left-color: var(--color-darkblue);
+}
+
+.sg-large-table__resize-handle:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -1px;
+}
+
+.sg-large-table__reset-widths {
+  flex: 0 0 auto;
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: var(--color-font-light);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sg-large-table__reset-widths:focus-visible {
+  outline: 2px solid var(--color-font-light);
+  outline-offset: 2px;
+}
+
 .sg-large-table__sort-button {
   display: flex;
   align-items: center;