@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

Key	Required	Type	Desc	Default
columns	V	Array	Define Columns
records	V	Array	Define Records
rowHeight		Number	Resize Row Height	50
avatarProps		Object	Custom Avatar type Props	size : 30, round : 50%
rowIconProps		Object	Custom Icon type Props	size : 30, icons : react-icons/fa
linkProps		Object	Custom Link type Props	target : _blank, text : value
imageProps		Object	Custom Thumbnail type Props	target : _blank, size : 30
timeFormat		String	Custom Time type Props	YYYY-MM-DD HH:mm:ss
useBackward		Boolean	Display Backward	false
onBackward		Function	Callback when backward clicked
onMoveRecord		Function	Callback when record moved
onClickRecord		Function	Callback when record clicked
onContextMenu		Function	Callback when mouse right clicked
onFileDrop		Function	Callback when local file dropped

Column - Props

Key	Required	Type	Desc	Vaild Values
accessor	V	String	Access to Record Key
className		String	Define className for style
type		String	Resizing border width	text, time, icon, avatar, link, checkbox, image
width		Number	Define Column Width	50, 120, 300 etc ...
useDesc		Boolean	Display Desc Under name when type is text	true, false

Record - Value by Type

Header Type	Value	Example
text	String	'Hong Gil Dong', 'Hi, Hello', etc ...
time	Date	new Date(), moment()
icon	String	'folder', 'file', 'pdf', 'image', 'audio', 'loading'
avatar	Object	{ src : imageUrl, name : String }
link	String	'http://www.google.com', etc...
checkbox	Boolean	true, false
image	String	'https://cdn3.iconfinder.com/data/icons/feather-5/24/download-512.png', etc...

Record - Other Props

Key	Required	Type	Desc	Default
checked	V	Boolean	IsCheck Row	false
readOnly		Boolean	Css - Opacity 0.5	false

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"} />