Table

'use client';

import { useState } from 'react';
import { Trans } from '@lingui/react/macro';
import { cellColumnHelper, Table, useTablePagination, useTableServerSelection } from '@mildang/design-system/Table';

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
  tags: string[];
  status: string;
  age: number;
  progress: number;
  createdAt: string;
  assignee: { initial: string; src?: string };
  team: { initial: string; src?: string }[];
}

const names = [
  '김서윤',
  '이도현',
  '박하은',
  '정우진',
  '최예린',
  '강민준',
  '윤서아',
  '한지호',
  '오수빈',
  '임시우',
  '송채원',
];
const avatar_src = [
  'https://picsum.photos/seed/avatar1/150/150',
  undefined,
  'https://picsum.photos/seed/avatar3/150/150',
  undefined,
  'https://picsum.photos/seed/avatar5/150/150',
  'https://picsum.photos/seed/avatar6/150/150',
  undefined,
  'https://picsum.photos/seed/avatar8/150/150',
  undefined,
  'https://picsum.photos/seed/avatar10/150/150',
  'https://picsum.photos/seed/avatar11/150/150',
];
const statuses = ['활성', '비활성'];
const phones = [
  '01012345678',
  '01098765432',
  '01055551234',
  '01011112222',
  '01033334444',
  '01066667777',
  '01077778888',
  '01088889999',
  '01099990000',
  '01022223333',
  '01044445555',
];

const sampleData: User[] = Array.from({ length: 30 }, (_, i) => {
  const name = names[i % names.length]!;
  const src = avatar_src[i % avatar_src.length];
  const teamSize = (i % 4) + 1;
  const date = new Date(2025, 0, 1 + i);
  return {
    id: i + 1,
    name,
    email: `mildangUser${i + 1}@ihateflyingbugs.com`,
    phone: phones[i % phones.length]!,
    tags: ['국어', '영어', '수학'].slice(0, (i % 3) + 1),
    status: statuses[i % statuses.length]!,
    age: 10 + (i % 10),
    progress: 50 + (i % 50),
    createdAt: date.toISOString(),
    assignee: { initial: name, src },
    team: Array.from({ length: teamSize }, (__, j) => ({
      initial: names[(i + j) % names.length]!,
      src: avatar_src[(i + j) % avatar_src.length],
    })),
  };
});

export default function TableAllFeaturesExample() {
  const [data, setData] = useState(sampleData);
  const pagination = useTablePagination();
  const pageItems = data.slice(
    pagination.pageIndex * pagination.pageSize,
    (pagination.pageIndex + 1) * pagination.pageSize,
  );
  const selection = useTableServerSelection({
    pageData: pageItems,
    getRowId: (row) => String(row.id),
    totalCount: data.length,
    allRowIds: data.map((d) => String(d.id)),
  });

  const col = cellColumnHelper<User>();
  const columns = [
    col.dragHandle(),
    col.rowIndex(),
    col.checkBox(),
    col.text('name', '이름', { size: 80, enableSorting: true }),
    col.number('age', '나이', { size: 80, enableSorting: true, ContentProps: { trailingText: '세' } }),
    col.phone('phone', '전화번호', { size: 140, ContentProps: { countryCode: 'KR' } }),
    col.text('email', '이메일', {
      enableResizing: true,
      CellProps: { truncate: 'end' },
    }),
    col.number('progress', '진도율', {
      enableSorting: true,
      ContentProps: { trailingText: '%' },
      HeaderProps: { tooltip: '전체 학습 과정 대비 진도율 입니다' },
    }),
    col.date('createdAt', '등록일', { size: 120, enableSorting: true }),
    col.chip('status', '상태', {
      size: 80,
      ContentProps: {
        chipMap: {
          활성: { color: 'green', label: '활성' },
          비활성: { color: 'red', label: '비활성' },
        },
        type: 'fill',
      },
    }),
    col.chip('tags', () => <Trans>수강 과목</Trans>, {
      enableResizing: true,
      ContentProps: {
        chipMap: {
          국어: { color: 'blue', label: <Trans>국어</Trans> },
          영어: { color: 'green', label: <Trans>영어</Trans> },
          수학: { color: 'red', label: <Trans>수학</Trans> },
        },
        size: 'md',
      },
    }),
    col.avatar('assignee', '선생님', { size: 80 }),
  ];

  const handleRowOrderChange = (reorderedPage: User[]) => {
    const start = pagination.pageIndex * pagination.pageSize;
    setData((prev) => {
      const next = [...prev];
      next.splice(start, reorderedPage.length, ...reorderedPage);
      return next;
    });
  };

  return (
    <Table
      data={pageItems}
      columns={columns}
      tableOptions={{
        getRowId: (row) => String(row.id),
        state: { rowSelection: selection.rowSelection },
        onRowSelectionChange: selection.onRowSelectionChange,
      }}
      onRowOrderChange={handleRowOrderChange}
      selectionBar={selection.selectionBar}
      pagination={{
        ...pagination,
        rowCount: data.length,
        showTrailing: true,
      }}
    />
  );
}

'use client';

import { useState } from 'react';
import { Trans } from '@lingui/react/macro';
import { cellColumnHelper, Table, useTablePagination, useTableServerSelection } from '@mildang/design-system/Table';

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
  tags: string[];
  status: string;
  age: number;
  progress: number;
  createdAt: string;
  assignee: { initial: string; src?: string };
  team: { initial: string; src?: string }[];
}

const names = [
  '김서윤',
  '이도현',
  '박하은',
  '정우진',
  '최예린',
  '강민준',
  '윤서아',
  '한지호',
  '오수빈',
  '임시우',
  '송채원',
];
const avatar_src = [
  'https://picsum.photos/seed/avatar1/150/150',
  undefined,
  'https://picsum.photos/seed/avatar3/150/150',
  undefined,
  'https://picsum.photos/seed/avatar5/150/150',
  'https://picsum.photos/seed/avatar6/150/150',
  undefined,
  'https://picsum.photos/seed/avatar8/150/150',
  undefined,
  'https://picsum.photos/seed/avatar10/150/150',
  'https://picsum.photos/seed/avatar11/150/150',
];
const statuses = ['활성', '비활성'];
const phones = [
  '01012345678',
  '01098765432',
  '01055551234',
  '01011112222',
  '01033334444',
  '01066667777',
  '01077778888',
  '01088889999',
  '01099990000',
  '01022223333',
  '01044445555',
];

const sampleData: User[] = Array.from({ length: 30 }, (_, i) => {
  const name = names[i % names.length]!;
  const src = avatar_src[i % avatar_src.length];
  const teamSize = (i % 4) + 1;
  const date = new Date(2025, 0, 1 + i);
  return {
    id: i + 1,
    name,
    email: `mildangUser${i + 1}@ihateflyingbugs.com`,
    phone: phones[i % phones.length]!,
    tags: ['국어', '영어', '수학'].slice(0, (i % 3) + 1),
    status: statuses[i % statuses.length]!,
    age: 10 + (i % 10),
    progress: 50 + (i % 50),
    createdAt: date.toISOString(),
    assignee: { initial: name, src },
    team: Array.from({ length: teamSize }, (__, j) => ({
      initial: names[(i + j) % names.length]!,
      src: avatar_src[(i + j) % avatar_src.length],
    })),
  };
});

export default function TableAllFeaturesExample() {
  const [data, setData] = useState(sampleData);
  const pagination = useTablePagination();
  const pageItems = data.slice(
    pagination.pageIndex * pagination.pageSize,
    (pagination.pageIndex + 1) * pagination.pageSize,
  );
  const selection = useTableServerSelection({
    pageData: pageItems,
    getRowId: (row) => String(row.id),
    totalCount: data.length,
    allRowIds: data.map((d) => String(d.id)),
  });

  const col = cellColumnHelper<User>();
  const columns = [
    col.dragHandle(),
    col.rowIndex(),
    col.checkBox(),
    col.text('name', '이름', { size: 80, enableSorting: true }),
    col.number('age', '나이', { size: 80, enableSorting: true, ContentProps: { trailingText: '세' } }),
    col.phone('phone', '전화번호', { size: 140, ContentProps: { countryCode: 'KR' } }),
    col.text('email', '이메일', {
      enableResizing: true,
      CellProps: { truncate: 'end' },
    }),
    col.number('progress', '진도율', {
      enableSorting: true,
      ContentProps: { trailingText: '%' },
      HeaderProps: { tooltip: '전체 학습 과정 대비 진도율 입니다' },
    }),
    col.date('createdAt', '등록일', { size: 120, enableSorting: true }),
    col.chip('status', '상태', {
      size: 80,
      ContentProps: {
        chipMap: {
          활성: { color: 'green', label: '활성' },
          비활성: { color: 'red', label: '비활성' },
        },
        type: 'fill',
      },
    }),
    col.chip('tags', () => <Trans>수강 과목</Trans>, {
      enableResizing: true,
      ContentProps: {
        chipMap: {
          국어: { color: 'blue', label: <Trans>국어</Trans> },
          영어: { color: 'green', label: <Trans>영어</Trans> },
          수학: { color: 'red', label: <Trans>수학</Trans> },
        },
        size: 'md',
      },
    }),
    col.avatar('assignee', '선생님', { size: 80 }),
  ];

  const handleRowOrderChange = (reorderedPage: User[]) => {
    const start = pagination.pageIndex * pagination.pageSize;
    setData((prev) => {
      const next = [...prev];
      next.splice(start, reorderedPage.length, ...reorderedPage);
      return next;
    });
  };

  return (
    <Table
      data={pageItems}
      columns={columns}
      tableOptions={{
        getRowId: (row) => String(row.id),
        state: { rowSelection: selection.rowSelection },
        onRowSelectionChange: selection.onRowSelectionChange,
      }}
      onRowOrderChange={handleRowOrderChange}
      selectionBar={selection.selectionBar}
      pagination={{
        ...pagination,
        rowCount: data.length,
        showTrailing: true,
      }}
    />
  );
}

'use client';

import { useState } from 'react';
import type { ExpandedState } from '@tanstack/react-table';
import { cellColumnHelper, Table } from '@mildang/design-system/Table';

interface MenuItem {
  id: number;
  name: string;
  status: string;
  type: string;
  access: string;
  isAddRow?: boolean;
  children?: MenuItem[];
}

const menuData: MenuItem[] = [
  { id: 1, name: '서비스 소개', status: '공개중', type: 'HTML 임베드형', access: '모든 사용자' },
  { id: 2, name: '실시간 강좌', status: '공개중', type: '강좌 리스트형', access: '모든 사용자' },
  { id: 3, name: '콘텐츠 강좌', status: '공개중', type: '강좌 리스트형', access: '모든 사용자' },
  {
    id: 4,
    name: '알림마당',
    status: '공개중',
    type: '',
    access: '',
    children: [
      { id: 41, name: '공지사항', status: '공개중', type: '게시판형', access: '전체 사용자' },
      { id: 42, name: '1:1 문의', status: '공개중', type: '게시판형', access: '전체 사용자' },
      { id: 43, name: '소식지', status: '공개중', type: '게시판형', access: '전체 사용자' },
    ],
  },
  {
    id: 5,
    name: '소통마당',
    status: '공개중',
    type: '',
    access: '',
    children: [
      { id: 51, name: '자유게시판', status: '공개중', type: '게시판형', access: '전체 사용자' },
      {
        id: 52,
        name: '갤러리',
        status: '공개중',
        type: '',
        access: '',
        children: [
          { id: 521, name: '사진 갤러리', status: '공개중', type: '갤러리형', access: '전체 사용자' },
          { id: 522, name: '동영상 갤러리', status: '공개중', type: '갤러리형', access: '전체 사용자' },
          { id: 523, name: '문서 갤러리', status: '비공개', type: '갤러리형', access: '전체 사용자' },
        ],
      },
    ],
  },
  { id: 6, name: '설정', status: '비공개', type: '설정형', access: '관리자' },
];

const updateChildren = (items: MenuItem[], parentId: number, newChildren: MenuItem[]): MenuItem[] =>
  items.map((item) =>
    item.id === parentId
      ? { ...item, children: newChildren }
      : item.children
        ? { ...item, children: updateChildren(item.children, parentId, newChildren) }
        : item,
  );

export default function TableExpandStandaloneExample() {
  const [expanded, setExpanded] = useState<ExpandedState>({});
  const [data, setData] = useState(menuData);

  const col = cellColumnHelper<MenuItem>();
  const columns = [
    col.expand(),
    col.checkBox(),
    col.text('name', '메뉴명'),
    col.chip('status', '공개 상태', {
      size: 100,
      ContentProps: {
        chipMap: {
          공개중: { color: 'green', label: '공개중' },
          비공개: { color: 'red', label: '비공개' },
        },
        type: 'fill',
      },
    }),
    col.text('type', '유형', { size: 120 }),
    col.text('access', '화면 접근 권한', { size: 120 }),
  ];

  return (
    <Table<MenuItem>
      data={data}
      columns={columns}
      onRowOrderChange={(newData, { parentRow }) => {
        if (!parentRow) {
          setData(newData);
        } else {
          setData((prev) => updateChildren(prev, parentRow.id, newData));
        }
      }}
      tableOptions={{
        getRowId: (row) => String(row.id),
        getSubRows: (row) => row.children,
        state: { expanded },
        onExpandedChange: setExpanded,
      }}
    />
  );
}

'use client';

import { useState } from 'react';
import type { SortingState } from '@tanstack/react-table';
import { cellColumnHelper, Table } from '@mildang/design-system/Table';

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
  tags: string[];
  status: string;
  age: number;
  progress: number;
  createdAt: string;
  assignee: { initial: string; src?: string };
  team: { initial: string; src?: string }[];
}

const names = [
  '김서윤',
  '이도현',
  '박하은',
  '정우진',
  '최예린',
  '강민준',
  '윤서아',
  '한지호',
  '오수빈',
  '임시우',
  '송채원',
];
const avatar_src = [
  'https://picsum.photos/seed/avatar1/150/150',
  undefined,
  'https://picsum.photos/seed/avatar3/150/150',
  undefined,
  'https://picsum.photos/seed/avatar5/150/150',
  'https://picsum.photos/seed/avatar6/150/150',
  undefined,
  'https://picsum.photos/seed/avatar8/150/150',
  undefined,
  'https://picsum.photos/seed/avatar10/150/150',
  'https://picsum.photos/seed/avatar11/150/150',
];
const statuses = ['활성', '비활성'];
const phones = [
  '01012345678',
  '01098765432',
  '01055551234',
  '01011112222',
  '01033334444',
  '01066667777',
  '01077778888',
  '01088889999',
  '01099990000',
  '01022223333',
  '01044445555',
];

const sampleData: User[] = Array.from({ length: 30 }, (_, i) => {
  const name = names[i % names.length]!;
  const src = avatar_src[i % avatar_src.length];
  const teamSize = (i % 4) + 1;
  const date = new Date(2025, 0, 1 + i);
  return {
    id: i + 1,
    name,
    email: `mildangUser${i + 1}@ihateflyingbugs.com`,
    phone: phones[i % phones.length]!,
    tags: ['국어', '영어', '수학'].slice(0, (i % 3) + 1),
    status: statuses[i % statuses.length]!,
    age: 10 + (i % 10),
    progress: 50 + (i % 50),
    createdAt: date.toISOString(),
    assignee: { initial: name, src },
    team: Array.from({ length: teamSize }, (__, j) => ({
      initial: names[(i + j) % names.length]!,
      src: avatar_src[(i + j) % avatar_src.length],
    })),
  };
});

export default function TableFeaturesSortingExample() {
  const [sorting, setSorting] = useState<SortingState>([]);

  // 나이가 겹치는 데이터로 다중 정렬 효과 확인
  const sortingData: User[] = [
    { ...sampleData[0]!, age: 12, progress: 90 },
    { ...sampleData[1]!, age: 14, progress: 60 },
    { ...sampleData[2]!, age: 12, progress: 70 },
    { ...sampleData[3]!, age: 14, progress: 85 },
    { ...sampleData[4]!, age: 12, progress: 55 },
    { ...sampleData[5]!, age: 11, progress: 70 },
    { ...sampleData[6]!, age: 14, progress: 70 },
    { ...sampleData[7]!, age: 11, progress: 95 },
  ];

  const col = cellColumnHelper<User>();

  const columns = [
    col.rowIndex('번호'),
    col.text('name', '이름', { size: 80, enableSorting: true }),
    col.number('age', '나이', { size: 100, enableSorting: true, ContentProps: { trailingText: '세' } }),
    col.number('progress', '진도율', {
      enableSorting: true,
      enableResizing: true,
      ContentProps: { trailingText: '%' },
    }),
    col.chip('status', '상태', {
      size: 80,
      ContentProps: {
        chipMap: {
          활성: { color: 'green', label: '활성' },
          비활성: { color: 'red', label: '비활성' },
        },
        type: 'fill',
      },
    }),
  ];

  const getSortLabel = () => {
    if (sorting.length === 0) return '정렬 없음';
    return sorting
      .map((sort, i) => `${i + 1}. ${sort.id} ${sort.desc ? '내림차순 ↓' : '오름차순 ↑'}`)
      .join('  ');
  };

  return (
    <div>
      <Table
        data={sortingData}
        columns={columns}
        tableOptions={{
          onSortingChange: setSorting,
          state: { sorting },
        }}
      />
      <div
        style={{
          marginTop: 16,
          padding: '8px 12px',
          background: sorting.length > 0 ? '#E8F4FD' : '#F5F5F5',
          borderRadius: 6,
          fontSize: 13,
          color: sorting.length > 0 ? '#1976D2' : '#666',
          display: 'inline-block',
        }}
      >
        {getSortLabel()}
      </div>
    </div>
  );
}

'use client';

import { cellColumnHelper, Table, useTablePagination } from '@mildang/design-system/Table';

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
  tags: string[];
  status: string;
  age: number;
  progress: number;
  createdAt: string;
  assignee: { initial: string; src?: string };
  team: { initial: string; src?: string }[];
}

const names = [
  '김서윤',
  '이도현',
  '박하은',
  '정우진',
  '최예린',
  '강민준',
  '윤서아',
  '한지호',
  '오수빈',
  '임시우',
  '송채원',
];
const avatar_src = [
  'https://picsum.photos/seed/avatar1/150/150',
  undefined,
  'https://picsum.photos/seed/avatar3/150/150',
  undefined,
  'https://picsum.photos/seed/avatar5/150/150',
  'https://picsum.photos/seed/avatar6/150/150',
  undefined,
  'https://picsum.photos/seed/avatar8/150/150',
  undefined,
  'https://picsum.photos/seed/avatar10/150/150',
  'https://picsum.photos/seed/avatar11/150/150',
];
const statuses = ['활성', '비활성'];
const phones = [
  '01012345678',
  '01098765432',
  '01055551234',
  '01011112222',
  '01033334444',
  '01066667777',
  '01077778888',
  '01088889999',
  '01099990000',
  '01022223333',
  '01044445555',
];

const sampleData: User[] = Array.from({ length: 30 }, (_, i) => {
  const name = names[i % names.length]!;
  const src = avatar_src[i % avatar_src.length];
  const teamSize = (i % 4) + 1;
  const date = new Date(2025, 0, 1 + i);
  return {
    id: i + 1,
    name,
    email: `mildangUser${i + 1}@ihateflyingbugs.com`,
    phone: phones[i % phones.length]!,
    tags: ['국어', '영어', '수학'].slice(0, (i % 3) + 1),
    status: statuses[i % statuses.length]!,
    age: 10 + (i % 10),
    progress: 50 + (i % 50),
    createdAt: date.toISOString(),
    assignee: { initial: name, src },
    team: Array.from({ length: teamSize }, (__, j) => ({
      initial: names[(i + j) % names.length]!,
      src: avatar_src[(i + j) % avatar_src.length],
    })),
  };
});

function fakeFetch(pageIndex: number, pageSize: number) {
  const start = pageIndex * pageSize;
  return {
    items: sampleData.slice(start, start + pageSize),
    totalCount: sampleData.length,
  };
}

interface TablePaginationServerSideExampleProps {
  showTrailing?: boolean;
}

export default function TablePaginationServerSideExample({
  showTrailing = false,
}: TablePaginationServerSideExampleProps) {
  const col = cellColumnHelper<User>();
  const columns = [
    col.rowIndex('번호'),
    col.text('name', '이름', { size: 80 }),
    col.number('age', '나이', { size: 80, ContentProps: { trailingText: '세' } }),
    col.text('email', '이메일', { CellProps: { truncate: 'end' } }),
  ];

  const pagination = useTablePagination({ pageSizeOptions: [5, 10, 30] });

  // GraphQL offset 기반 페이지네이션:
  // pagination.offset → (pageIndex * pageSize), pagination.limit → pageSize
  const fetch = fakeFetch(pagination.pageIndex, pagination.pageSize);

  return (
    <Table
      data={fetch.items}
      columns={columns}
      pagination={{
        ...pagination,
        rowCount: fetch.totalCount,
        showTrailing,
      }}
    />
  );
}

'use client';

import { useState } from 'react';
import { cellColumnHelper, Table } from '@mildang/design-system/Table';
import { Button } from '@mildang/design-system/Button';

interface LectureRow {
  id: number;
  dateTime: string;
  periods: string[];
  classStatus: string;
  attendance: string;
  memo: string;
}

const periodOptions = [
  { label: '1차시', value: '1차시' },
  { label: '2차시', value: '2차시' },
  { label: '3차시', value: '3차시' },
  { label: '4차시', value: '4차시' },
  { label: '5차시', value: '5차시' },
  { label: '6차시', value: '6차시' },
  { label: '7차시', value: '7차시' },
  { label: '8차시', value: '8차시' },
];

export default function TableCellsComboBoxAndInputExample() {
  const [data, setData] = useState<LectureRow[]>([
    {
      id: 1,
      dateTime: '2026-04-08T14:00:00Z',
      periods: ['3차시', '4차시'],
      classStatus: '수업 예정',
      attendance: '입력 전',
      memo: '준비물 확인',
    },
    {
      id: 2,
      dateTime: '2026-04-09T10:00:00Z',
      periods: ['1차시', '2차시', '3차시'],
      classStatus: '수업 완료',
      attendance: '입력 전',
      memo: '',
    },
    {
      id: 3,
      dateTime: '2026-04-10T09:00:00Z',
      periods: [],
      classStatus: '수업 예정',
      attendance: '입력 전',
      memo: '보강 예정',
    },
  ]);

  const handlePeriodsChange = (values: string[], row: LectureRow) => {
    setData((prev) => prev.map((r) => (r.id === row.id ? { ...r, periods: values } : r)));
  };

  const handleStatusChange = (value: string, row: LectureRow) => {
    setData((prev) => prev.map((r) => (r.id === row.id ? { ...r, classStatus: value } : r)));
  };

  const handleMemoChange = (value: string, row: LectureRow) => {
    setData((prev) => prev.map((r) => (r.id === row.id ? { ...r, memo: value } : r)));
  };

  const classStatusOptions = [
    { label: '수업 예정', value: '수업 예정' },
    { label: '수업 완료', value: '수업 완료', color: 'green' as const },
  ];

  const col = cellColumnHelper<LectureRow>();
  const columns = [
    col.rowIndex(),
    col.date('dateTime', '날짜', { size: 120 }),
    col.comboBox('periods', '수강 차시', {
      size: 240,
      ContentProps: {
        multiple: true,
        options: periodOptions,
        placeholder: '미정',
        onChange: handlePeriodsChange,
      },
    }),
    col.comboBox('classStatus', '수업 현황', {
      size: 140,
      ContentProps: {
        options: classStatusOptions,
        placeholder: '미정',
        onChange: handleStatusChange,
      },
    }),
    col.text('attendance', '출석 현황', { size: 130 }),
    col.input('memo', '메모', {
      ContentProps: {
        placeholder: '메모를 입력하세요.',
        onChange: handleMemoChange,
      },
    }),
    col.controller(
      '강의실',
      () => (
        <Button variant="tertiary" size="sm">
          강의실 개설
        </Button>
      ),
      { size: 130 },
    ),
  ];

  return <Table data={data} columns={columns} />;
}