function Table(props) {
  const {
    attached,
    basic,
    celled,
    children,
    className,
    collapsing,
    color,
    columns,
    compact,
    definition,
    fixed,
    footerRow,
    headerRow,
    headerRows,
    inverted,
    padded,
    renderBodyRow,
    selectable,
    singleLine,
    size,
    sortable,
    stackable,
    striped,
    structured,
    tableData,
    textAlign,
    unstackable,
    verticalAlign,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(celled, 'celled'),
    useKeyOnly(collapsing, 'collapsing'),
    useKeyOnly(definition, 'definition'),
    useKeyOnly(fixed, 'fixed'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(selectable, 'selectable'),
    useKeyOnly(singleLine, 'single line'),
    useKeyOnly(sortable, 'sortable'),
    useKeyOnly(stackable, 'stackable'),
    useKeyOnly(striped, 'striped'),
    useKeyOnly(structured, 'structured'),
    useKeyOnly(unstackable, 'unstackable'),
    useKeyOrValueAndKey(attached, 'attached'),
    useKeyOrValueAndKey(basic, 'basic'),
    useKeyOrValueAndKey(compact, 'compact'),
    useKeyOrValueAndKey(padded, 'padded'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(columns, 'column'),
    'table',
    className,
  )
  const rest = getUnhandledProps(Table, props)
  const ElementType = getElementType(Table, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  const hasHeaderRows = headerRow || headerRows
  const headerShorthandOptions = { defaultProps: { cellAs: 'th' } }
  const headerElement = hasHeaderRows && (
    <TableHeader>
      {TableRow.create(headerRow, headerShorthandOptions)}
      {_.map(headerRows, (data) => TableRow.create(data, headerShorthandOptions))}
    </TableHeader>
  )

  return (
    <ElementType {...rest} className={classes}>
      {headerElement}
      <TableBody>
        {renderBodyRow &&
          _.map(tableData, (data, index) => TableRow.create(renderBodyRow(data, index)))}
      </TableBody>
      {footerRow && <TableFooter>{TableRow.create(footerRow)}</TableFooter>}
    </ElementType>
  )
}
function Table(props) {
  const {
    attached,
    basic,
    celled,
    children,
    className,
    collapsing,
    color,
    columns,
    compact,
    definition,
    fixed,
    footerRow,
    headerRow,
    headerRows,
    inverted,
    padded,
    renderBodyRow,
    selectable,
    singleLine,
    size,
    sortable,
    stackable,
    striped,
    structured,
    tableData,
    textAlign,
    unstackable,
    verticalAlign,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(celled, 'celled'),
    useKeyOnly(collapsing, 'collapsing'),
    useKeyOnly(definition, 'definition'),
    useKeyOnly(fixed, 'fixed'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(selectable, 'selectable'),
    useKeyOnly(singleLine, 'single line'),
    useKeyOnly(sortable, 'sortable'),
    useKeyOnly(stackable, 'stackable'),
    useKeyOnly(striped, 'striped'),
    useKeyOnly(structured, 'structured'),
    useKeyOnly(unstackable, 'unstackable'),
    useKeyOrValueAndKey(attached, 'attached'),
    useKeyOrValueAndKey(basic, 'basic'),
    useKeyOrValueAndKey(compact, 'compact'),
    useKeyOrValueAndKey(padded, 'padded'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(columns, 'column'),
    'table',
    className,
  )
  const rest = getUnhandledProps(Table, props)
  const ElementType = getElementType(Table, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  const hasHeaderRows = headerRow || headerRows
  const headerShorthandOptions = { defaultProps: { cellAs: 'th' } }
  const headerElement = hasHeaderRows && (
    <TableHeader>
      {TableRow.create(headerRow, headerShorthandOptions)}
      {_.map(headerRows, (data) => TableRow.create(data, headerShorthandOptions))}
    </TableHeader>
  )

  return (
    <ElementType {...rest} className={classes}>
      {headerElement}
      <TableBody>
        {renderBodyRow &&
          _.map(tableData, (data, index) => TableRow.create(renderBodyRow(data, index)))}
      </TableBody>
      {footerRow && <TableFooter>{TableRow.create(footerRow)}</TableFooter>}
    </ElementType>
  )
}
function Table ( props ) { const { attached , basic , celled , children , className , collapsing , color , columns , compact , definition , fixed , footerRow , headerRow , headerRows , inverted , padded , renderBodyRow , selectable , singleLine , size , sortable , stackable , striped , structured , tableData , textAlign , unstackable , verticalAlign , } = props const classes = cx ( 'ui' , color , size , useKeyOnly ( celled , 'celled' ) , useKeyOnly ( collapsing , 'collapsing' ) , useKeyOnly ( definition , 'definition' ) , useKeyOnly ( fixed , 'fixed' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( selectable , 'selectable' ) , useKeyOnly ( singleLine , 'single line' ) , useKeyOnly ( sortable , 'sortable' ) , useKeyOnly ( stackable , 'stackable' ) , useKeyOnly ( striped , 'striped' ) , useKeyOnly ( structured , 'structured' ) , useKeyOnly ( unstackable , 'unstackable' ) , useKeyOrValueAndKey ( attached , 'attached' ) , useKeyOrValueAndKey ( basic , 'basic' ) , useKeyOrValueAndKey ( compact , 'compact' ) , useKeyOrValueAndKey ( padded , 'padded' ) , useTextAlignProp ( textAlign ) , useVerticalAlignProp ( verticalAlign ) , useWidthProp ( columns , 'column' ) , 'table' , className , ) const rest = getUnhandledProps ( Table , props ) const ElementType = getElementType ( Table , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } const hasHeaderRows = headerRow || headerRows const headerShorthandOptions = { defaultProps : { cellAs : 'th' } } const headerElement = hasHeaderRows && ( < TableHeader > { TableRow . create ( headerRow , headerShorthandOptions ) } { _ . map ( headerRows , ( data ) => TableRow . create ( data , headerShorthandOptions ) ) } < / TableHeader > ) return ( < ElementType { ... rest } className = { classes } > { headerElement } < TableBody > { renderBodyRow && _ . map ( tableData , ( data , index ) => TableRow . create ( renderBodyRow ( data , index ) ) ) } < / TableBody > { footerRow && < TableFooter > { TableRow . create ( footerRow ) } < / TableFooter > } < / ElementType > ) }
A table displays a collections of data grouped into rows.
A table displays a collections of data grouped into rows .