행 번호

rowNumbers로 보이는 순서대로 데이터 행에 1, 2, 3… 번호를 매기는 고정 컬럼을 붙입니다. 페이지가 바뀌어도 번호가 이어집니다.

실행 예제행 번호

정렬과 검색을 따라 다시 매겨지는 왼쪽 행 번호.

이 데모의 코드

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, search, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(500),
    locale: lang,
    // numbers follow what is on screen: they are given again after sorting and filtering
    rowNumbers: { width: 56, header: '#' },
  });

  text(ctx, h('Sort or search: the numbers on the left follow the rows as shown. Click a number to focus its row.',
    '정렬하거나 검색해 보세요. 왼쪽 번호는 보이는 순서대로 다시 매겨집니다. 번호를 누르면 그 행으로 이동합니다.'));
  separator(ctx);
  button(ctx, h('Sort by Q1, high to low', '1분기 높은 순'), () => { grid.setSort([{ colId: 'q1', dir: 'desc' }]); ctx.log('setSort q1 desc'); });
  button(ctx, h('Sort by name', '이름순'), () => { grid.setSort([{ colId: 'name', dir: 'asc' }]); ctx.log('setSort name asc'); });
  button(ctx, h('Clear sort', '정렬 해제'), () => { grid.setSort([]); ctx.log('setSort []'); });
  search(ctx, h('Search…', '검색…'), v => grid.setQuickFilter(v));
  return grid;
}

rowNumbers: true를 켜면 왼쪽에 좁은 고정 컬럼이 생기고, 스프레드시트처럼 보이는 순서대로 데이터 행에 1, 2, 3… 번호를 매깁니다. 번호는 정렬과 필터를 따라 다시 매겨지고, 페이지가 바뀌어도 이어지며(50행씩일 때 2쪽은 51부터), 그룹 행과 요약 행은 건너뜁니다. 번호를 누르면 그 행으로 포커스가 옮겨 갑니다.

객체를 주면 컬럼의 width와 header 글자를 정할 수 있습니다. 인쇄에는 화면과 같이 번호가 나오고, print({ rowNumbers: false })로 뺄 수 있습니다.

createGrid(el, {
  columns,
  data,
  rowNumbers: true,                                // a "#" column pinned on the left
  // rowNumbers: { width: 64, header: 'No.' },     // your own width and header
  pagination: { pageSize: 50 },                    // numbers continue: page 2 starts at 51
});

grid.print({ rowNumbers: false });                 // leave them out of a printout

아래 예제에서 정렬하거나 검색하면 번호가 다시 매겨지는 모습을 볼 수 있습니다. 쪽이 바뀌어도 번호가 이어지는 모습은 페이지 나누기 예제에서 볼 수 있습니다.

옵션

이름	타입	설명
`rowNumbers`	`boolean \| { width?, header? }`	왼쪽에 고정되어 데이터 행에 1, 2, 3… 번호를 매기는 컬럼. 그룹 행과 요약 행에는 번호가 붙지 않습니다.
`print({ rowNumbers })`	`boolean`	인쇄에 번호를 넣을지 정합니다(기본: 화면과 같게).