Droptables: 스타일링 테이블

1. 표 형식

도구 모음에서 글꼴, 글꼴 크기, 텍스트 스타일, 셀 배경색, 텍스트 색상, 셀 수평 및 수직 정렬 등 셀 스타일을 설정할 수 있습니다. 이는 단일 셀이나 여러 셀에 적용할 수 있습니다.

행 높이와 열 너비는 픽셀 단위로 정의할 수 있습니다. 메뉴 서식 > 열/줄 크기 적용 다음, 열 크기 조정/행 크기 완료 클릭하여 완료합니다.

2. 테마 및 정렬 옵션

'테마' 메뉴에서 테마 선택 찾으실 수 있습니다 . 테마를 클릭하시면 적용됩니다.

같은 메뉴 테마 > 대체 색상 머리글 및 바닥글 스타일 사용하여 표의 선 색상을 지정할 수 있습니다 . 템플릿 스타일을 선택하거나 플러그인 설정에서 직접 만들 수 있습니다.

sortable 매개변수를 사용하면 프런트엔드에서 AJAX 데이터 정렬을 수행할 수 있습니다. 메뉴 형식 > 정렬 .

표 정렬은 표 전체를 포함하는 div를 정렬하는 것입니다. 예를 들어 표 전체를 가운데 정렬하는 것과 같습니다. 메뉴 서식 > 표 정렬 .

셀 강조 표시도 옵션으로 제공됩니다. 구성에서 '줄', '열' 또는 '둘 다' 옵션을 활성화할 수 있습니다 . 기본적으로 비활성화되어 있습니다. 강조 표시의 색상과 불투명도를 조정할 수 있습니다.

3. 셀에 도구 설명 추가

셀에 마우스를 올리면 툴팁이 표시되는 기능도 있습니다(구성 요소 옵션에서 활성화해야 함). 표의 각 셀을 마우스 오른쪽 버튼으로 클릭하면 툴팁

툴팁 너비를 픽셀 단위로 설정할 수 있습니다. 툴팁을 편집할 수 있는 편집기가 있는 툴팁으로 이동합니다.

내용을 추가하고 저장하면 완료됩니다. 마우스를 올리면 툴팁이 공개 측에 표시됩니다.

4. ACL 및 프런트엔드 관리

Joomla 프런트엔드에서 테이블을 관리할 수 있습니다. Joomla 메뉴 관리자에서 '새 메뉴' 항목을 추가하고 유형으로 '테이블 관리'를 선택한 후, 템플릿으로 Droptables

프런트엔드에서 Droptables Manager를 보면 다음과 같습니다.

Joomla 사용자 그룹 ACL을 사용하여 테이블 편집 작업을 제어할 수 있습니다. 먼저, Droptables 사용자 역할 탭 .

테이블 > 테이블 액세스 에서 테이블 소유자를 설정할 수 있습니다

5. 행 및 열 고정

컬럼 동결

열 고정은 메뉴 서식 > 반응형 옵션 . 최대 5개의 열을 고정할 수 있으며, 첫 번째 열부터 계산됩니다.

행/열 고정을 위해 테이블의 높이를 고정할 수 있는 추가 옵션이 있습니다(테이블 컨테이너의 높이가 무한할 수 있기 때문입니다).

고정할 열을 선택하면 표를 스크롤하여 항상 고정된 열을 표시할 수 있습니다.

행 동결

메뉴 형식 > 표 머리글 에서 찾을 수 있으며 , 여기서 옵션을 켜고 행을 고정할 수 있습니다(최대 5행).

테이블 높이를 설정하려면 반응형 옵션으로 돌아가세요.

그러면 설정에 따라 첫 번째 행이 프런트엔드에 고정됩니다.

6. 열 데이터 필터링

필터링 옵션은 메뉴 형식 > 필터 . 공개 데이터 필터링 필드를 활성화하려면 을 클릭하세요.

필터의 예:

7. 셀 패딩 및 테두리 반경

셀의 패딩과 테두리 반경을 조정하는 데 도움이 되는 테두리 아이콘은 도구 모음에서 찾을 수 있습니다.

8. 사용자 정의 CSS

한 단계 더 나아가 보겠습니다. CSS 편집 기술이 있는 웹 디자이너라면 메뉴 형식 > 사용자 정의 CSS .

셀, 행, 열에는 각각을 식별하고 사용자 정의 CSS를 적용하는 좌표가 있습니다. R은 행, C는 열입니다. 여기서는 행 1(r1), 열 4(c4) = dtr1 dtc4입니다.

CSS 코드는 코드 미러를 사용하여 색칠되었습니다. CSS 코드는 더 적은 코드로도 충분히 작동합니다!

9. 반응형 Joomla 테이블

내 테이블은 반응형인가요? 아니면 작은 기기에서 스크롤을 사용하나요?

열 숨기기

Droptables 우선순위 도구를 사용하여 반응형 디자인을 처리합니다. 기본적으로 반응형 기능은 비활성화되어 있으며, 오버플로가 발생합니다(모바일에서는 잘 작동합니다). " 열 숨기기" 옵션을 사용하려면 메뉴 형식 > 반응형 옵션으로 이동해야 합니다 .

반응형 모드가 고급 기능으로, 모바일 기기에서 열 숨기기 우선순위를 정의할 수 있습니다. 열이 숨겨지면 모바일 메뉴에 체크박스가 표시되어 열을 강제로 표시/숨기도록 설정할 수 있습니다.
열 크기는 표 편집 시 고정됩니다. 모든 열의 크기가 컨테이너 크기에 비해 너무 크면 오버플로가 발생하여 모바일 기기에서 쉽게 스크롤할 수 있습니다.

스크롤이 있는 테이블 (열 수가 적은 경우에 더 좋음)

열이 숨겨진 테이블 (열이 많은 경우에 더 좋음)

반복되는 헤더

사이트의 작은 영역에 표를 삽입하려는 경우 사용할 수 있는 또 다른 옵션입니다. 메뉴 형식 > 반응형 옵션 다음 , 반응형 유형 > 반복 헤더를 선택하세요.

귀하의 요구에 따라 사용자 정의할 수 있는 옵션이 제공됩니다.

• 반응형 중단점(px): 테이블이 이 반응형 모드로 전환되는 시점을 정의하기 위해 픽셀 단위로 중단점 값을 선택합니다.
• 반응형 최대 높이(px): 반응형 모드가 활성화되면 중단점 값에 따라 매우 긴 테이블이 생성되는 것을 방지하기 위해 최대 높이를 정의합니다.
• 반응형 모드 스타일링: 이 반응형 모드에 기본 스타일링을 적용하거나 표 색상을 사용하세요.

그 후에는 프런트엔드에서 테이블이 어떻게 보이는지 확인할 수 있습니다.

10. 테이블 다운로드

테이블을 다른 사용자와 공유하려면 메뉴 테이블 'Excel 내보내기' 버튼 선택하세요 . 프런트엔드에서 다운로드할 때 파일 형식은 *.xlsx입니다.

11. 페이지 매김

메뉴 형식 > 페이지 매김 에서 이 기능을 찾을 수 있습니다 . 토글 버튼을 사용하여 활성화하고 페이지에 표시할 행 수를 선택하세요.

12. 단일 셀 형식 

Droptables 에서 단일 셀에 대해 날짜, 시간, 통화, 숫자 형식을 설정할 수 있습니다 . 먼저 하나 또는 여러 셀을 선택한 후, 메뉴 형식 > 날짜/시간으로 이동합니다.

그 후, 통화와 숫자도 같은 방식으로 처리할 수 있습니다.

13. 프런트엔드에서 테이블 인쇄

인쇄 버튼을 표시하려면 먼저 메뉴 표로 하여 인쇄 버튼 옵션을 선택해야 합니다.