Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Table

데이터를 테이블 형식으로 표시할 수 있는 컴포넌트입니다.

import { Table } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

데이터를 테이블 형식으로 표시할 때

사용예제

Java

Java is an object-oriented programming language known for its platform independence and strong type system.

Python

Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields.

JavaScript

JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development.

Basic Usage

기본적인 사용 방법입니다.

import { Table, Typography, Rate } from "sud-ui";
import { LogoJava, LogoPython, LogoJavascript } from "sud-icons";

export default function App() {
  const columns = [
    {
      key: "icon",
      title: "icon",
      description: "icon",
      align: "center",
      col: 1
    },
    {
      key: "name",
      title: "name",
      description: "name",
      align: "center",
      col: 1
    },
    {
      key: "rate",
      title: "rate",
      description: "rate",
      align: "center",
      col: 2
    },
    {
      key: "description",
      title: "description",
      description: "description",
      align: "center",
      col: 3
    }
  ]

  const dataSource = [
    {
      icon: <LogoJava size={50} />,
      name: "Java",
      rate: 5,
      description: "Java is an object-oriented programming language known for its platform independence and strong type system."
    },
    {
      icon: <LogoPython size={50} />,
      name: "Python",
      rate: 5,
      description: "Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields."
    },
    {
      icon: <LogoJavascript size={50} />,
      name: "JavaScript",
      rate: 5,
      description: "JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development."
    }
  ]
  
  return (
    <div>
      <Table columns={columns} dataSource={dataSource} />
    </div>   
  )
}

Java

Java is an object-oriented programming language known for its platform independence and strong type system.

Python

Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields.

JavaScript

JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development.

Sorted

정렬할 컬럼을 지정할 수 있습니다.

import { Table, Typography, Rate } from "sud-ui";
import { LogoJava, LogoPython, LogoJavascript } from "sud-icons";

export default function App() {
  const columns = [
    {
      key: "icon",
      title: "icon",
      description: "icon",
      align: "center",
      col: 1
    },
    {
      key: "name",
      title: "name",
      description: "name",
      align: "center",
      col: 1,
      sorter: true,
      render: (value) => <Typography code>{value}</Typography>
    },
    {
      key: "rate",
      title: "rate",
      description: "rate",
      align: "center",
      col: 2,
      render: (value) => <Rate value={value} disabled />
    },
    {
      key: "description",
      title: "description",
      description: "description",
      align: "center",
      col: 3,
      render: (value) => (
        <Typography as="div" style={{ textAlign: "left" }}>
          {value}
        </Typography>
      )
    }
  ];

  const dataSource = [
    {
      icon: <LogoJava size={50} />,
      name: "Java",
      rate: 5,
      description: "Java is an object-oriented programming language known for its platform independence and strong type system."
    },
    {
      icon: <LogoPython size={50} />,
      name: "Python",
      rate: 5,
      description: "Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields."
    },
    {
      icon: <LogoJavascript size={50} />,
      name: "JavaScript",
      rate: 5,
      description: "JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development."
    }
  ];

  return (
    <div>
      <Table columns={columns} dataSource={dataSource} />
    </div>
  );
}

Aim

AlignCenter

AlignLeft

AlignRight

AngleDoubleDown

Pagination

페이지네이션을 설정할 수 있습니다.

import { Table } from "sud-ui";
import * as Icons from "sud-icons";

export default function App() {
  const columns = [
    {
      key: "icon",
      title: "icon",
      description: "icon",
      align: "center"
    },
    {
      key: "name",
      title: "name",
      description: "name",
      align: "center"
    }
  ];

  const dataSource = Object.entries(Icons).map(([name, Component]) => ({
    icon: <Component size={30} />,
    name: name
  }));

  return (
    <div>
      <Table columns={columns} dataSource={dataSource} pagination={{ pageSize: 5, align: "center" }} />
    </div>
  );
}

Java

Java is an object-oriented programming language known for its platform independence and strong type system.

Python

Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields.

JavaScript

JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development.

Style Customization

테이블 스타일을 커스텀할 수 있습니다.

import { Table, Typography, Rate } from "sud-ui";
import { LogoJava, LogoPython, LogoJavascript } from "sud-icons";

export default function App() {
  const columns = [
    {
      key: "icon",
      title: "icon",
      description: "icon",
      align: "center",
      col: 1
    },
    {
      key: "name",
      title: "name",
      description: "name",
      align: "center",
      col: 1,
      render: (value) => <Typography code>{value}</Typography>
    },
    {
      key: "rate",
      title: "rate",
      description: "rate",
      align: "center",
      col: 2,
      render: (value) => <Rate value={value} disabled />
    },
    {
      key: "description",
      title: "description",
      description: "description",
      align: "center",
      col: 3,
      render: (value) => (
        <Typography as="div" style={{ textAlign: "left" }}>
          {value}
        </Typography>
      )
    }
  ];

  const dataSource = [
    {
      icon: <LogoJava size={50} />,
      name: "Java",
      rate: 5,
      description: "Java is an object-oriented programming language known for its platform independence and strong type system."
    },
    {
      icon: <LogoPython size={50} />,
      name: "Python",
      rate: 5,
      description: "Python is a high-level programming language with clean and readable syntax, widely used in data science and AI fields."
    },
    {
      icon: <LogoJavascript size={50} />,
      name: "JavaScript",
      rate: 5,
      description: "JavaScript is a scripting language that runs in web browsers, used for both frontend and backend (Node.js) development."
    }
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        colorType="mint"
        borderColor="mint-2"
        borderType="dashed"
        borderWeight={2}
      />
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

columns

테이블의 컬럼 설정 배열

TableColumn[]

[]

dataSource

테이블에 표시할 데이터 배열

any[]

[]

rowKey

각 행의 고유 키를 지정하는 필드명 또는 함수

string | ((record: any) => string)

key

size

테이블 크기

colorType

테이블 색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

sub

shape

테이블 모서리 모양

square

circle

rounded

capsule

rounded

shadow

테이블 그림자

none

border

테이블 테두리 표시 여부

boolean

true

borderColor

테이블 테두리 색상(palette값 또는 HEX code)

string

borderType

테이블 테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테이블 테두리 두께

number

pagination

페이지네이션 설정 (boolean 또는 상세 설정 객체)

boolean | TablePaginationProps

false

onChange

테이블 상태 변경 시 호출되는 콜백 함수

(pagination: any, filters: any, sorter: any) => void

emptyText

데이터가 없을 때 표시할 텍스트

string

"데이터가 없습니다"

className

테이블의 클래스명

string

headerClassName

테이블 헤더의 클래스명

string

bodyClassName

테이블 본문의 클래스명

string

width

테이블 너비

string

100%

height

테이블 높이

string

auto

style

테이블 스타일

CSSProperties

{}

columns

key

컬럼의 고유 키

string

title

컬럼의 제목

string | ReactNode

align

컬럼의 정렬 방식

left

center

right

left

col

컬럼의 너비 비율

number

width

컬럼의 고정 너비

string | number

render

컬럼의 렌더링 함수

(value: any, record: any, index: number) => ReactNode

sorter

정렬 함수 또는 정렬 가능 여부

boolean | ((a: any, b: any) => number)

false

className

컬럼의 클래스명

string

개인정보 처리방침

서비스 약관