Wijmo 2020 v1 릴리스를 발표하게 되어 기쁘게 생각합니다. 여기서는 새로운 FlexGrid 기능을 소개합니다. FlexGrid가 크기가 0인 행과 열의 크기를 조정하는 방식을 개선했습니다. 이전 버전에서는 열이 보이지 않을 때까지 크기를 조정하면 열이 완전히 사라졌습니다. 이전 열의 가장자리를 드래그하여 열을 다시 표시 할 수는 있지만 더 이상 마지막 열 자체의 크기를 조정할 수 없습니다.

예를 들어, Downloads, Sales 및 Expenses의 세 개의 열이 있는 그리드가 있고 Sales 열의 크기를 0으로 조정했다고 가정하겠습니다.

이전 버전 동작 : 너비를 0으로 조정하면 오른쪽과 같이 sales 열이 완전히 사라집니다. 

더 이상 sales 열을 볼 수 없으며 열이 존재한다는 시각적 표시가 없습니다.

Downloads 열의 가장자리를 오른쪽으로 드래그하면 (현재 보이지 않는) Sales 열의 크기가 조정되어 다시 표시됩니다. 이 작업을 수행하기 전에는 마우스로 Downloads 열의 크기를 조정할 수 없습니다.

최신 버전에서는 이러한 상황을 개선하기 위해 Excel을 참고하였습니다. 이제 Sales 열을 보이지 않게 만들면 다음과 같은 결과가 나타납니다.

새로운 버전 동작 : Downloads 및 Expenses 헤더 사이에 이중 테두리가 표시됩니다. 

Downloads 및 Expenses 헤더 사이의 이중 테두리는 두 열 사이에 숨겨진(너비가 없는) 열이 있음을 나타냅니다. 이중 테두리의 왼쪽 부분을 드래그 하여 Downloads 열의 크기를 조정할 수 있습니다. 또한 이중 테두리의 오른쪽 부분을 드래그하여 Sales 열의 크기를 다시 표시 할 수도 있습니다.

새로운 버전의 동작을 통해 사용자는 숨겨진 열이 있음을 알 수 있으며 마우스로 숨겨진 열 및 인접 항목을 포함한 열의 크기를 조정할 수 있습니다.

이중 테두리는 CSS를 사용하여 만들어지므로 원하는 경우 사용자 지정하거나 쉽게 제거할 수 있습니다.

FlexGrid 열 크기 조정 데모 :

• FlexGrid 열 크기 조정 JavaScript 데모
• FlexGrid 열 크기 조정 Angular 데모
• FlexGrid 열 크기 조정 React 데모
• FlexGrid 열 크기 조정 Vue 데모