@licuido-ui/ui_table
v4.0.1
Published
A table is a method of organizing data, and is usually portrayed as rows and columns. Tables can be simple, meaning the first row has headers and is not counted as data, or multidimensional, meaning there is no header row, and all of the information prese
Readme
Table
A table is a method of organizing data, and is usually portrayed as rows and columns. Tables can be simple, meaning the first row has headers and is not counted as data, or multidimensional, meaning there is no header row, and all of the information presented is tabular data.
Author
- @author Hariharan [email protected]
Link
PlayGround
Installation
npm i @licuido-ui/ui_tableImage
Import component
import { Table } from '@licuido-ui/ui_table';Usage
<Table Header={[]} dataList={[]} tableData={[]} />Table with row border Radius, row spacing, header height, header border radius and last row style
Using props
headerOptions: {
fontSize: '16px',
fontWeight: '600',
color: '#02111A',
bgColor: '#EAEAEA',
borderBottom: '0px solid #E6E6E6',
padding: '10px 16px',
borderRadius: 8,
style: { height: '90px' },
},
rowOptions: {
paddingTop: '8px',
paddingBottom: '8px',
border: '1px solid #D9DBDD',
borderRadius: '8px',
lastRowStyle: { background: 'lightblue !important' },
},
cellOptions: {
fontSize: '16px',
fontWeight: '500',
color: '#353448',
bgColor: '#fff',
padding: '16px !important',
// borderBottom: '1px solid #d3d3d3',
style: { padding: '6px' },
},checkbox function and props
//props
selectedCheckbox={selectedCheckbox}
SelectAll={onChangeCheckbox}
checkboxHandleChange={onChangeCheckbox}
isSelectedIndeterminateCheckbox={
selectedCheckbox?.length === tableData?.dataList?.length ? false : selectedCheckbox?.length >= 1
}
isSelectedAllCheckbox={selectedCheckbox?.length === tableData?.dataList?.length}
//function
const [selectedCheckbox, setSelectedCheckbox] = React.useState<Array<number>>([]);
const onChangeCheckbox = (id: any) => {
if (id === 'selectAll') {
if (selectedCheckbox?.length === tableData?.dataList?.length) {
setSelectedCheckbox([]);
} else {
setSelectedCheckbox(tableData.dataList?.map((item) => item?.id as number) as Array<number>);
}
} else {
const isExit = selectedCheckbox?.find((item) => item === id);
if (isExit) {
setSelectedCheckbox(selectedCheckbox?.filter((item) => item !== id));
} else {
setSelectedCheckbox((pre) => [...pre, id]);
}
}
};Table Props
| Name | Description | Default | Control |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------- |
| Header* | TableHeader | - | Set object |
| dataList* | TableBody | - | Set object |
| tableData* | TableData | - | Set object |
| headerOptions | { fontSize?: string; fontWeight?: string; color?: string; bgColor?: string; borderBottom?: string; padding?: string; } | - | Set object |
| rowOptions | { rowOddBgColor: string; rowEvenBgColor: string; paddingTop: string; paddingBottom: string; border: string;} | - | Set object |
| cellOptions | { fontSize?: string; fontWeight?: string; color?: string; bgColor?: string; borderBottom?: string; padding?: string; } | - | Set object |
| noDataFound | { fontSize: string; fontWeight: string; color: string; bgColor: string; text: string; component: ReactNode; } | - | Set object |
| alertOptions | { isEnable?: boolean; alertOpen: boolean; setAlertOpen: (status: boolean) => void; title?: string; description?: string; primaryText?: string; secondaryText?: string; icon?: ReactNode; } | - | Set object |
| setSelectedCheckbox | any | - | Set object |
| selectedCheckbox | (string | number)[] | - | Set object |
| checkboxHandleChange | () => void | - | - |
| handleSwitch | (id: any, rowData: any, event: any) => void | - | - |
| switchList | (string | number)[] | - | Set object |
| SelectAll | (id: any, event: any) => void | ((data: any, isRestSet: boolean) => void) | - | - |
| tableBackground | any | - | "#ffffff" |
| tableMinWidth | string | - | 3350px |
| tableMinHeight | string | - | 465px |
| tableName* | string | - | Team Member |
| paddingAll | string | - | 0px |
| padding | string[] | - | Set object |
| marginAll | string | - | 0px |
| margin | string[] | - | Set object |
| tableBorderRadius | string | - | 12px |
| dense | "small""medium" | - | smallmedium |
| stickyOptions | { stickyHeader: boolean; stickyRight: string[]; stickyLeft: string[]; } | - | Set object |
| paginationOption | { isEnable?: boolean; rowPerPage?: number; rowsPerPageOptions?: (number | { value: number; label: string; })[]; } | - | Set object |
| HeaderComponent* | { variant: string | number; component?: ReactNode; styles?: { padding?: any; margin?: any; }; headerSelect?: string; setHederSelect?: () => void; searchPlaceholder?: string; selectOption?: { ...; }[]; ... 14 more ...; setHederCheckbox?: () => void; } | - | Set object |
| className | string | - | Set string |
| sx | SxProps<Theme> | - | Set object |
| id | any | - | Set object |
| tableMaxWidth | string | - | Set string |
| tableMaxHeight | string | - | Set string |
| isSelectedAll | boolean | - | Set boolean |
| isDataMask | boolean | - | Set boolean |
| onRowClick | (rowData: object, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void | undefined | Function |
Note: if you use onRowClick and Table cell functions, both called same time. The issue solution for using Table cell function e.preventDefault(); e.stopPropagation();
(id, data, e) => {
console.log(id, data);
e.preventDefault();
e.stopPropagation();
},Sample Props
Header: [
{
id: 'id',
align: 'left',
disablePadding: false,
label: 'Sl no',
isSortable: true,
},
{
id: 'select',
align: 'left',
disablePadding: false,
label: 'Select',
variant: 'CHECKBOX',
isSortable: false,
},
{
id: 'name',
align: 'left',
disablePadding: false,
label: 'Dessert',
isSortable: true,
},
{
id: 'calories',
align: 'left',
disablePadding: false,
label: 'Calories',
isSortable: true,
},
{
id: 'fat',
align: 'left',
disablePadding: false,
label: 'Fat (g)',
isSortable: true,
},
{
id: 'carbs',
align: 'left',
disablePadding: false,
label: 'Carbs (g)',
isSortable: true,
},
{
id: 'protein',
align: 'left',
disablePadding: false,
label: 'Protein (g)',
isSortable: true,
},
{
id: 'profile',
align: 'center',
disablePadding: false,
label: 'Profile',
isSortable: false,
},
{
id: 'overall_progress',
align: 'left',
disablePadding: false,
label: 'Overall Progress',
isSortable: false,
},
{
id: 'production',
align: 'left',
disablePadding: false,
label: 'Production',
isSortable: false,
},
{
id: 'status',
align: 'left',
disablePadding: false,
label: 'Status',
isSortable: false,
},
{
id: 'performance',
align: 'center',
disablePadding: false,
label: 'Performance',
isSortable: false,
},
{
id: 'signals',
align: 'center',
disablePadding: false,
label: 'Signals',
isSortable: false,
},
{
id: 'reporting_to',
align: 'center',
disablePadding: false,
label: 'Reporting to',
isSortable: false,
},
{
id: 'global_rating',
align: 'center',
disablePadding: false,
label: 'Global Rating',
isSortable: false,
},
{
id: 'growth',
align: 'center',
disablePadding: false,
label: 'Growth',
isSortable: false,
},
{
id: 'experience',
align: 'center',
disablePadding: false,
label: 'Experience',
isSortable: false,
},
{
id: 'link',
align: 'center',
disablePadding: false,
label: 'Link',
isSortable: false,
},
{
id: 'custom',
align: 'center',
disablePadding: false,
label: 'Custom',
isSortable: false,
},
{
id: 'alert_type',
align: 'center',
disablePadding: false,
label: 'Alert Type',
isSortable: false,
},
{
id: 'response',
align: 'left',
disablePadding: false,
label: 'Response',
isSortable: false,
},
{
id: 'action',
align: 'center',
disablePadding: false,
label: 'Action',
isSortable: false,
},
],
dataList: [
{
id: 1,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
profile: {
image: 'sample.jpg',
label: 'Hariharan',
},
overall_progress: '45',
production: [
{
label: 'Sufficient',
color: '#7692cc',
bgColor: '#e2eafa',
},
{
label: 'React',
color: '#5AC782',
bgColor: '#BDEDCF',
},
],
performance: 'Completely away',
signals: [
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Hariharan',
},
{
image: 'sample.jpg',
label: 'Ram',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
{
image: 'sample.jpg',
label: 'Babu',
},
{
image: 'sample.jpg',
label: 'Siva',
},
],
global_rating: 4,
growth: {
value: 2.5,
variant: 'POSITIVE',
},
experience: '2023-03-15T18:43:21.055Z',
custom: <BasicButton>Button 1</BasicButton>,
alert_type: {
label: 'Filter',
color: '#7692cc',
bgColor: '#e2eafa',
icon: <FunnelIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
{
id: 2,
name: 'cake',
calories: 5,
fat: 7,
carbs: 167,
protein: 34.3,
profile: {
image: 'sample.jpg',
label: 'Hari Ram',
},
overall_progress: '35',
production: [
{
label: 'Insufficient',
color: '#AE7330',
bgColor: '#FCEDDD',
},
{
label: 'Next.js',
color: '#F7838B',
bgColor: '#FCCACD',
},
],
status: false,
performance: 'Need to improve a lot',
signals: [
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Ram',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
{
image: 'sample.jpg',
label: 'Siva',
},
],
global_rating: 3,
growth: {
value: 0.5,
variant: 'NEGATIVE',
},
experience: '2023-03-05T18:43:21.055Z',
custom: <BasicButton>Button 2</BasicButton>,
alert_type: {
label: 'Insufficient',
color: '#AE7330',
bgColor: '#FCEDDD',
icon: <FunnelIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
{
id: 3,
name: 'T',
calories: 5,
fat: 7,
carbs: 167,
protein: 34.3,
profile: {
image: 'sample.jpg',
label: 'Siva',
},
overall_progress: '67',
production: [
{
label: 'Sufficient',
color: '#7692cc',
bgColor: '#e2eafa',
},
{
label: 'React',
color: '#5AC782',
bgColor: '#BDEDCF',
},
],
performance: 'Impactful',
signals: [
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Siva',
},
{
image: 'sample.jpg',
label: 'Ram',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
],
global_rating: 1,
growth: {
value: 0.1,
variant: 'NEGATIVE',
},
experience: '2022-01-15T18:43:21.055Z',
custom: <BasicButton>Button 3</BasicButton>,
alert_type: {
label: 'Delete',
color: '#F44F5A',
bgColor: '#FCCACD',
icon: <SouthIcon />,
},
response: {
label: 'Not Delivered',
icon: <SouthIcon />,
},
},
{
id: 4,
name: 'Pie',
calories: 5,
fat: 7,
carbs: 167,
protein: 34.3,
profile: {
image: 'sample.jpg',
label: 'Kumar',
},
overall_progress: '98',
production: [
{
label: 'Insufficient',
color: '#AE7330',
bgColor: '#FCEDDD',
},
{
label: 'Work',
color: '#AE7333',
bgColor: '#FCEDDF',
},
],
status: false,
performance: 'Need to improve',
signals: [
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'Hari',
label: 'Excellent',
color: '#007C32',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Ram',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
],
global_rating: 3.5,
growth: {
value: 3.2,
variant: 'POSITIVE',
},
experience: '2023-01-11T18:43:21.055Z',
custom: <BasicButton>Button 4</BasicButton>,
alert_type: {
label: 'Edit',
color: '#6f6f6f',
bgColor: '#DEDEDE',
icon: <SouthIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
{
id: 5,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
profile: {
image: 'sample.jpg',
label: 'Hariharan',
},
overall_progress: '45',
production: [
{
label: 'Sufficient',
color: '#7692cc',
bgColor: '#e2eafa',
},
{
label: 'React',
color: '#5AC782',
bgColor: '#BDEDCF',
},
],
performance: 'Good',
signals: [
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Hariharan',
},
],
global_rating: 4.5,
growth: {
value: 1.2,
variant: 'POSITIVE',
},
experience: '2023-02-25T18:43:21.055Z',
custom: <BasicButton>Button 5</BasicButton>,
alert_type: {
label: 'Delete',
color: '#F44F5A',
bgColor: '#FCCACD',
icon: <SouthIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
{
id: 6,
name: 'cake',
calories: 5,
fat: 7,
carbs: 167,
protein: 34.3,
profile: {
image: 'sample.jpg',
label: 'Hari Ram',
},
overall_progress: '35',
production: [
{
label: 'Insufficient',
color: '#AE7330',
bgColor: '#FCEDDD',
},
{
label: 'Work',
color: '#AE7333',
bgColor: '#FCEDDF',
},
],
status: false,
performance: 'Very Good',
signals: [
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Hariharan',
},
],
global_rating: 4,
growth: {
value: 0.74,
variant: 'NEGATIVE',
},
experience: '2022-12-15T18:43:21.055Z',
custom: <BasicButton>Button 6</BasicButton>,
alert_type: {
label: 'Delete',
color: '#F44F5A',
bgColor: '#FCCACD',
icon: <SouthIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
{
id: 7,
name: 'T',
calories: 5,
fat: 7,
carbs: 167,
protein: 34.3,
profile: {
image: 'sample.jpg',
label: 'Siva',
},
overall_progress: '67',
production: [
{
label: 'Sufficient',
color: '#7692cc',
bgColor: '#e2eafa',
},
{
label: 'React',
color: '#5AC782',
bgColor: '#BDEDCF',
},
],
performance: 'Spectacular',
signals: [
{
name: 'Hari',
label: 'Excelent',
color: '#007C32',
},
{
name: 'Ram',
label: 'Good',
color: '#F2B824',
},
{
name: 'Anbu',
label: 'Very Good',
color: '#4C9E29',
},
{
name: 'S',
label: 'Bad',
color: '#DE1010',
},
{
name: 'Babu',
label: 'Good',
color: '#F2EB24',
},
],
reporting_to: [
{
image: 'sample.jpg',
label: 'Hari Ram',
},
{
image: 'sample.jpg',
label: 'Hariharan',
},
],
global_rating: 2,
growth: {
value: 0.63,
variant: 'NEGATIVE',
},
experience: '2022-06-02T18:43:21.055Z',
custom: <BasicButton>Button 7</BasicButton>,
alert_type: {
label: 'Delete',
color: '#F44F5A',
bgColor: '#FCCACD',
icon: <SouthIcon />,
},
response: {
label: 'sent',
icon: <FunnelIcon />,
},
},
],
tableData: [
{ type: ['INCREMENT'], name: 'sl_no' },
{ type: ['CHECKBOX'], name: 'checkbox' },
{ type: ['TEXT'], name: 'name' },
{ type: ['TEXT'], name: 'calories' },
{ type: ['TEXT'], name: 'fat' },
{ type: ['TEXT'], name: 'carbs' },
{ type: ['TEXT'], name: 'protein' },
{ type: ['IMAGE_WITH_LABEL'], name: 'profile', variant: 'circular' },
{ type: ['PROGRESS'], name: 'overall_progress' },
{ type: ['LABEL'], name: 'production' },
{
type: ['SWITCH'],
name: 'status',
switchText: [{ label_1: 'No', label_2: 'Yes' }],
},
{ type: ['PERFORMANCE'], name: 'performance' },
{ type: ['AVATAR_NAME'], name: 'signals' },
{
type: ['IMAGE_WITH_PROFILES'],
name: 'reporting_to',
variant: 'circular',
},
{ type: ['STAR_RATING'], name: 'global_rating' },
{ type: ['GROWTH'], name: 'growth' },
{ type: ['DATE'], name: 'experience', format: 'YYYY MMM DD' },
{
type: ['LINK'],
name: 'link',
label: 'view',
viewHandel: (id: any) => {
console.log(id);
},
},
{ type: ['CUSTOM'], name: 'custom' },
{ type: ['ICON_WITH_LABEL'], name: 'alert_type' },
{ type: ['ICON_WITH_TEXT'], name: 'response' },
{
type: ['ACTION'],
name: 'action',
variant: [
{
icon: <VisibilityOffIcon />,
method: (id: string | number, rowData: object, e: Event) => {
console.log(id, rowData, e);
},
},
{
icon: <SouthIcon width={'16px'} height={'16px'} />,
method: (id: string | number, rowData: object, e: Event) => {
return console.log(id, rowData, e);
},
},
{
icon: <VisibilityIcon />,
method: (id: string | number, rowData: object, e: Event) => {
console.log(id, rowData, e);
},
},
],
},
],
headerOptions: {
fontSize: '16px',
fontWeight: '500',
color: '#818181',
bgColor: '#EAEAEA',
borderBottom: '0px solid #E6E6E6',
padding: '12px',
},
rowOptions: {
rowOddBgColor: '#fff',
rowEvenBgColor: '#F7F7F7',
paddingTop: '4px',
paddingBottom: '4px',
border: '2px #D9DBDD solid',
},
cellOptions: {
fontSize: '16px',
fontWeight: '500',
color: '#353448',
// bgColor: '#fff',
borderBottom: '0px solid #E6E6E6',
padding: '12px',
},
noDataFound: {
fontSize: '16px',
fontWeight: '600',
color: '#353448',
bgColor: '#F7F7F7',
text: 'No Data Found',
component: null,
},
alertOptions: {
isEnable: false,
alertOpen: false,
setAlertOpen: () => undefined,
title: 'Are you sure, would you like to deactivate?',
description: '',
primaryText: 'Yes',
secondaryText: 'No',
icon: <AlertIcon />,
},
setSelectedCheckbox: () => undefined,
selectedCheckbox: [],
checkboxHandleChange: () => undefined,
handleSwitch: () => undefined,
switchList: [],
SelectAll: () => undefined,
tableBackground: '#ffffff',
tableMinWidth: '3350px',
tableMinHeight: '465px',
tableName: 'Team Member',
paddingAll: '0px',
padding: ['1px', '1px', '1px', '1px'],
marginAll: '0px',
margin: ['0px', '1px', '0px', '1px'],
tableBorderRadius: '12px',
dense: 'medium',
stickyOptions: {
stickyHeader: true,
stickyLeft: [],
stickyRight: ['action', 'response'],
},
paginationOption: {
rowPerPage: 5,
rowsPerPageOptions: [5, 10, 25],
},
HeaderComponent: {
variant: 1,
styles: {
padding: '10px 0',
margin: '0',
},
headerSelect: '',
setHederSelect: () => undefined,
searchPlaceholder: 'Search',
selectOption: [
{
label: 'Status',
value: '',
},
{
label: 'Active',
value: 'active',
},
{
label: 'Inactive',
value: 'inactive',
},
],
setHederSearch: () => undefined,
deleteIcon: <DeleteIcon />,
downloadIcon: <SouthIcon />,
funnelIcon: <FunnelIcon />,
searchIcon: <VisibilityIcon />,
fillerMethod: () => undefined,
downloadMethod: () => undefined,
},