테이블

간단한 테이블

방보다 넓음

액션이 있는 테이블

포인터 아래에서 밝힌 줄

선택할 수 있는 행

각 행의 머리 부분에 있는 상자, 모두를 위한 헤더에 하나, 그리고 위의 액션: 선택된 행을 자신의 주소로 전송하며, 선택된 것이 없을 때는 접근할 수 없습니다.

파일, 총계, 각 행에 대한 액션

이름으로 읽힌 경로, 시작 부분에서 잘린 폴더. 바는 행의 수에 따라 끝나며, `all`로 표시된 액션은 선택된 것이 없어도 작동합니다 — 모든 행을 가져오며, 예상되는 바로 이끌어갑니다.

필터

테이블 상단에 있는 필터 바, 각각의 눈에 띄지 않는 메뉴가 있으며, 필터가 작동하면 무엇을 좁히는지를 나타냅니다. 서버에서는 페이지의 쿼리에서 살아있으며 — 각 옵션이 링크입니다 — 컨트롤러는 그로부터 행을 좁힙니다; vue에서는 api를 위한 페이지에 전달된 값 또는 이미 있는 행에 적용됩니다. 각 옵션은 상자입니다 — 하나의 선택을 위한 둥글게 — 톤이 있을 때 색상이 있습니다, 상태 또는 카테고리로.

정렬

정렬하는 헤더는 서버의 링크이자 vue의 버튼입니다: 오름차순, 내림차순, 그 다음 페이지에서 선언한 원래 순서로 돌아가며, 이 목록이 시작에서 화살표로 표시합니다. 빈 날짜는 양쪽 모두에서 마지막으로 가고, 이름은 언어가 정렬하는 방식으로 비교됩니다. 여기서 테이블은 자체적으로 제공된 행을 정렬합니다; 목록을 페이지하는 컨트롤러는 동일한 쿼리를 읽습니다.

브라우저에서의 정렬, twig로부터

`vue: true`는 동일한 열과 행을 vue 쌍에 전달합니다: 브라우저에서 전체 목록을 정렬하고 검색하며, 페이지 로드 없이. 페이지가 전체를 보유하는 목록을 위해 — 짧은 목록이거나 api가 제공하지 않는 목록.

선택에서의 액션

충분한 액션이 몰려 있을 때 동일한 바: 하나가 선택되어 적용됩니다.

링크 및 아이콘 셀

로딩 상태

비어 있는 상태

열 정렬

코드, 수치 및 총합

`cell: 'code'`는 모노 글꼴로 식별자를 설정합니다; `cell: 'number'`, 또는 `unit`,은 페이지의 로케일로 수치를 작성합니다. `negative: true`는 오류 톤으로 0 이하의 수치를 그리고, 그 마이너스 기호가 이를 나타냅니다. `totals`는 페이지가 넘기는 행으로, 다른 행 아래에 그려집니다 — 테이블은 아무 것도 더하지 않고, 한 페이지 또는 필터링된 목록을 유지합니다. 서버에 의해 그려진 후, vue에 의해 그려집니다.

마크다운에서

마크다운으로 작성된 테이블이 `markdown_ds`를 통해 전달됩니다: 열, 정렬 및 각 셀의 마크업은 문서에서 읽혀지며, 이곳에 다른 테이블처럼 그려집니다. `markdown`은 페이지가 아닌 것에 대해 평문 `<table>`을 유지합니다 — 메일, 피드 등.

행 그룹화

오직 그룹만을 담고 있는 행은 행이 아닙니다: 그것은 두 개의 행 사이에 주어진 단어의 선입니다. 테이블을 가로질러 펼쳐지며, 뒤따르는 내용을 명명합니다 — 메뉴 구분자와 같은 읽기입니다.

상태 셀

상태는 색상이 아닌 원입니다: 셀은 타입 이름 또는 타입과 카운트 및 제목과 함께 상태 아이콘을 그립니다. 페이지에서 스타일링할 것은 없습니다.

스티키 헤더

긴 테이블은 행별로 읽히는 것만큼 열별로 읽힙니다. `sticky`를 사용하면 헤더가 보이는 동안 행이 아래로 스크롤됩니다; 상단에 자체 내용이 고정된 페이지는 `--table-sticky-top`에서 얼마나 아래인지 표시합니다.

자신만의 구역에 있는 테이블

`zone--table` 구역은 테이블 전체에 제공됩니다: 상단에서 이를 구동하고, 하단에서 페이지를 배치하며, 스크롤되는 것들 사이에 테이블의 바닥이 구역의 바닥까지 내립니다, 세 줄의 경우에도. 어떤 테이블이든 서버에서 작성되거나 vue에 의해 작성될 수 있습니다. `natural`인 경우, 왼쪽에 있는 것처럼, 테이블은 열의 너비를 유지하며, 늘어나지도 줄어들지도 않습니다.

Vue 엔터티 테이블

선택이 있는 Vue 테이블

클라이언트에서 동일한 계약: 선택된 키는 v-model:selected를 통해 돌아오고, 각 액션은 bulk-action으로 방출되며, 주소가 있는 것은 서버 테이블이 이를 게시할 때처럼 게시됩니다. 이들은 없으므로 아래의 선은 수행되었을 것이라고 표시합니다. 페이지당 세 행, 바 끝에 총계, 아카이브 모두 선택이 필요 없습니다.

총계 없는 페이지네이션

API가 총계를 반환하지 않을 때, 페이지 네비게이터는 이전/다음으로 돌아갑니다.

서버에서 그린 페이지네이션

`pagination(page, pages_count)`는 목록의 페이지를 링크로 그립니다: 각 페이지는 현재 있는 페이지의 경로와 쿼리를 유지하며 — 검색, 정렬 — `page`만 변경됩니다. 표시되는 숫자는 vue 페이저의 숫자로, 첫 번째, 마지막, 현재 페이지 및 이웃 페이지입니다. `compact`는 페이지 번호 주위에 이전 및 다음을 유지합니다; `route`와 `params`는 다른 주소로 페이지를 이동합니다.

Vue 날짜 포매터