Sha256: 681b3f4a1900a217d5c085c2cc8e7517cf6b90ab286a4739d55385600cfbbc05
Contents?: true
Size: 1.89 KB
Versions: 239
Compression:
Stored size: 1.89 KB
Contents
import React, { useEffect } from 'react'
import classnames from 'classnames'
import { buildAriaProps, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
import PbTable from '.'
type TableProps = {
aria?: { [key: string]: string },
children: React.ReactNode[] | React.ReactNode,
className: string,
collapse?: "sm" | "md" | "lg",
container: boolean,
dark?: boolean,
data?: { [key: string]: string },
dataTable: boolean,
disableHover: boolean,
id?: string,
responsive: "collapse" | "scroll" | "none",
singleLine: boolean,
size: "sm" | "md" | "lg",
sticky?: boolean,
verticalBorder?: boolean,
}
const Table = (props: TableProps) => {
const {
aria = {},
children,
className,
collapse = 'sm',
container = true,
dark,
data = {},
dataTable = false,
disableHover = false,
id,
responsive = 'collapse',
singleLine = false,
size = 'sm',
sticky = false,
verticalBorder = false,
} = props
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
useEffect(() => {
const instance = new PbTable()
instance.connect()
}, [])
return (
<table
{...ariaProps}
{...dataProps}
className={classnames(
'pb_table',
`table-${size}`,
`table-responsive-${responsive}`,
{
'table-card': container,
'table-dark': dark,
'data_table': dataTable,
'single-line': singleLine,
'no-hover': disableHover,
'sticky-header': sticky,
},
globalProps(props),
tableCollapseCss,
verticalBorderCss,
className
)}
id={id}
>
{children}
</table>
)
}
export default Table
Version data entries
239 entries across 239 versions & 1 rubygems