Droptables: 스타일링 테이블

1. 표 형식

도구 모음에서 글꼴, 글꼴 크기, 텍스트 스타일, 셀 배경색, 텍스트 색상, 셀 가로 및 세로 정렬 등과 ​​같은 셀 스타일을 설정할 수 있습니다. 이러한 스타일은 단일 셀 또는 여러 셀에 적용할 수 있습니다.

행 높이와 열 너비는 픽셀 단위로 정의할 수 있습니다. 메뉴에서 서식 > 열/행 크기 적용을선택한 다음 열 크기 조정/행 크기 조정을클릭하여 완료 설정을 완료하세요.

2. 테마 및 정렬 옵션

찾을 수 있습니다 테마 선택 메뉴를 통해 '테마'. 원하는 테마를 클릭하면 적용됩니다.

동일한 메뉴 테마 > 대체 색상통해 표의 테두리 색상을 지정할 수 있습니다 헤더 스타일링 및 푸터 스타일링 . 플러그인 설정에서 템플릿 스타일을 선택하거나 직접 스타일을 만들 수 있습니다.

sortable 매개변수를 사용하면 프런트엔드에서 AJAX를 이용한 데이터 정렬이 가능합니다. 메뉴 형식 > 정렬.

테이블 정렬은 테이블 전체를 포함하는 div를 정렬하는 것으로, 예를 들어 테이블 전체를 가운데 정렬하는 것입니다. 메뉴 형식 > 테이블 정렬.

셀 강조 표시 기능도 옵션으로 제공됩니다. 설정. 기본적으로는 비활성화되어 있습니다. 강조 표시의 색상과 투명도를 조정할 수 있습니다.

3. 셀에 툴팁 추가

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

툴팁 너비를 픽셀 단위로 설정할 수 있습니다. 설정하면 툴팁을 편집할 수 있는 편집기가 나타납니다.

콘텐츠를 추가하고 저장하면 완료됩니다. 마우스 커서를 올리면 툴팁이 공개 페이지에 표시됩니다.

4. ACL 및 프런트엔드 관리

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

다음은 프런트엔드에서 Droptables Manager를 볼 수 있는 화면입니다.

으로 이동하세요 사용자 역할 탭 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. 프런트엔드에 표 출력

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