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. 프런트엔드에 표 출력

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