@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
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"} />
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago