@baronote/listcomponents v0.1.64

@baronote/ListComponents

How To Install

# NPM
npm i @baronote/listcomponents

# Yarn
yarn add @baronote/listcomponents

Usage

import ListComponent from "@baronote/listcomponents";

...

const columns = React.useMemo(
  () => [
    {
      accessor: "col1", // accessor is the "key" in the data
      type: "checkbox", // if not define, Default text
      width: 50, // if not define, Default 150
    },
    {
      accessor: "col2", // accessor is the "key" in the data
      type: "text", // if not define, Default text
    },
    {
      accessor: "col3",
    },
  ],
  []
);

const records = React.useMemo(
  () => [
    {
      col1: true,
      col2: "Hello",
      col3: "World",
    },
    {
      col1: false,
      col2: "안녕",
      col3: "하세요",
      readOnly : true // Default is False
    },
  ],
  []
);

return (
  <ListComponent columns={columns} records={records} />
);

ListComponent - Props

Column - Props

Record - Value by Type

Record - Other Props

Example

const columns = React.useMemo(
  () => [
    {
      accessor: "checkbox",
      type: "checkbox",
      width: 50,
    },
    {
      accessor: "title",
      type: "text",
    },
    {
      accessor: "modified",
      type: "time",
    },
    {
      accessor: "extension",
      type: "icon",
      width: 50,
    },
    {
      accessor: "profile",
      type: "avatar",
    },
    {
      accessor: "link",
      type: "link",
    },
    {
      accessor: "thumbnail",
      type: "image",
    },
  ],
  []
);

const records = React.useMemo(
  () => [
    {
      title: "Sample_1",
      modified: new Date(),
      extension: "folder",
      profile: "Sample",
      link: "https://www.google.com",
      thumbnail:
        "https://cdn3.iconfinder.com/data/icons/feather-5/24/download-512.png",
      checked: false,
    },
    {
      title: "Test_File",
      extension: "file",
      profile: "Test",
      link: "https://www.naver.com",
      thumbnail:
        "https://cdn4.iconfinder.com/data/icons/pop-scenes/1000/navigation___explore_space_exploration_astronaut_planets_planet-512.png",
      checked: false,
    },
    {
      title: "Test_Pdf",
      modified: moment(),
      extension: "loading",
      readOnly: true,
      checked: false,
    },
  ],
  []
);

User Custom

want to resize Row height ?

<ListComponent columns={columns} records={records} rowHeight={90} />

want to custom Icons ?

<ListComponent
  columns={columns}
  records={records}
  iconProps={{
    size: 25,
    icons: {
      folder:
        "https://cdn3.iconfinder.com/data/icons/feather-5/24/folder-512.png",
      file: <FaRegFile />,
    },
  }}
/>

※ You can use react-icons and image url And also can add icon key

want to custom Avatar size or round ?

<ListComponent
  columns={columns}
  records={records}
  avatarProps={{
    size: 25,
    round: "20%",
  }}
/>

want to custom Link property ?

<ListComponent
  columns={columns}
  records={records}
  linkProps={{
    target: "_self",
    text: "Go to Link",
  }}
/>

want to custom Thumbnail size ?

<ListComponent
  columns={columns}
  records={records}
  imageProps={{
    target: "_self",
    size: 40,
  }}
/>

want to custom Timeformat ?

<ListComponent columns={columns} records={records} timeFormat={"YY/MM/DD"} />