@startupjs-ui/table 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/table
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **table:** refactor Table, Thead, Tbody, Tr, Th, Td components ([5994d66](https://github.com/startupjs/startupjs-ui/commit/5994d666d082c2aff3807a5892e035d8776763a2))

package/README.mdx

@@ -0,0 +1,225 @@
+import { Sandbox } from '@startupjs-ui/docs'
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TablePropsJsonSchema,
+  TheadPropsJsonSchema,
+  TbodyPropsJsonSchema,
+  TrPropsJsonSchema,
+  ThPropsJsonSchema,
+  TdPropsJsonSchema
+} from './index'
+import Span from '@startupjs-ui/span'
+
+# Table
+
+The Table component arranges data in rows and columns. Use Thead for headers, Tbody for rows, and Tr/Th/Td for cells. Section and cell components accept Div props for layout and interaction.
+
+```jsx
+import { Table, Thead, Tbody, Tr, Th, Td } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Table>
+    <Thead>
+      <Tr>
+        <Th>
+          <Span bold>First</Span>
+        </Th>
+        <Th>
+          <Span bold>Second</Span>
+        </Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr>
+        <Td>
+          <Span>First 1</Span>
+        </Td>
+        <Td>
+          <Span>Second 1</Span>
+        </Td>
+      </Tr>
+      <Tr>
+        <Td>
+          <Span>First 2</Span>
+        </Td>
+        <Td>
+          <Span>Second 3</Span>
+        </Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+```
+
+## Styling
+
+```jsx example
+const tableStyle = {
+  backgroundColor: '#fff'
+}
+
+const hoverOptions = {
+  style: {
+    cursor: 'default'
+  },
+  hoverStyle: {
+    backgroundColor: '#ebf8fd'
+  },
+  activeStyle: {
+    opacity: 1,
+    backgroundColor: '#ebf8fd'
+  },
+  onPress: () => undefined
+}
+
+return (
+  <Table style={tableStyle}>
+    <Thead>
+      <Tr>
+        <Th {...hoverOptions}>
+          <Span bold italic>First</Span>
+        </Th>
+        <Th {...hoverOptions}>Second</Th>
+        <Th {...hoverOptions}>Third</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr {...hoverOptions}>
+        <Td>
+          <Span italic>First 1</Span>
+        </Td>
+        <Td>Second 1</Td>
+        <Td>Third 1</Td>
+      </Tr>
+      <Tr {...hoverOptions}>
+        <Td>
+          <Span italic>First 2</Span>
+        </Td>
+        <Td>Second 2</Td>
+        <Td>Third 2</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+```
+
+## Sandbox
+
+### Table
+
+export const TableSandbox = (props) => (
+  <Table {...props}>
+    <Thead>
+      <Tr>
+        <Th>First</Th>
+        <Th>Second</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr>
+        <Td>First 1</Td>
+        <Td>Second 1</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+
+<Sandbox
+  Component={TableSandbox}
+  propsJsonSchema={TablePropsJsonSchema}
+/>
+
+### Thead
+
+export const TheadSandbox = (props) => (
+  <Table>
+    <Thead {...props}>
+      <Tr>
+        <Th>Header</Th>
+      </Tr>
+    </Thead>
+  </Table>
+)
+
+<Sandbox
+  Component={TheadSandbox}
+  propsJsonSchema={TheadPropsJsonSchema}
+/>
+
+### Tbody
+
+export const TbodySandbox = (props) => (
+  <Table>
+    <Tbody {...props}>
+      <Tr>
+        <Td>Cell</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+
+<Sandbox
+  Component={TbodySandbox}
+  propsJsonSchema={TbodyPropsJsonSchema}
+/>
+
+### Tr
+
+export const TrSandbox = (props) => (
+  <Table>
+    <Tbody>
+      <Tr {...props}>
+        <Td>Cell</Td>
+        <Td>Cell</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+
+<Sandbox
+  Component={TrSandbox}
+  propsJsonSchema={TrPropsJsonSchema}
+/>
+
+### Th
+
+export const ThSandbox = (props) => (
+  <Table>
+    <Thead>
+      <Tr>
+        <Th {...props}>Header</Th>
+      </Tr>
+    </Thead>
+  </Table>
+)
+
+<Sandbox
+  Component={ThSandbox}
+  propsJsonSchema={ThPropsJsonSchema}
+/>
+
+### Td
+
+export const TdSandbox = (props) => (
+  <Table>
+    <Tbody>
+      <Tr>
+        <Td {...props}>Cell</Td>
+      </Tr>
+    </Tbody>
+  </Table>
+)
+
+<Sandbox
+  Component={TdSandbox}
+  propsJsonSchema={TdPropsJsonSchema}
+/>

package/Table/index.cssx.styl

@@ -0,0 +1,2 @@
+.root
+  width 100%

package/Table/index.tsx

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* TableProps */} // used in docs generation
+
+export interface TableProps {
+  /** Custom styles applied to the table container */
+  style?: StyleProp<ViewStyle>
+  /** Table content rendered inside */
+  children?: ReactNode
+}
+
+function Table ({ style, children }: TableProps): ReactNode {
+  return pug`
+    View.root(style=style)= children
+  `
+}
+
+export default observer(themed('Table', Table))

package/Tbody/index.tsx

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+
+export const _PropsJsonSchema = {/* TbodyProps */} // used in docs generation
+
+export interface TbodyProps extends DivProps {
+  /** Custom styles applied to the body container */
+  style?: StyleProp<ViewStyle>
+  /** Body content rendered inside */
+  children?: ReactNode
+}
+
+function Tbody ({ style, children, ...props }: TbodyProps): ReactNode {
+  return pug`
+    Div(
+      ...props
+      style=style
+    )= children
+  `
+}
+
+export default observer(themed('Tbody', Tbody))

package/Td/index.cssx.styl

@@ -0,0 +1,3 @@
+.root
+  padding 1u 2u
+  flex 1

package/Td/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect, type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* TdProps */} // used in docs generation
+
+export interface TdProps extends DivProps {
+  /** Custom styles applied to the cell container */
+  style?: StyleProp<ViewStyle>
+  /** Cell content rendered inside */
+  children?: ReactNode
+  /** Collapse text into a single line with ellipsis, tap to toggle @default false */
+  ellipsis?: boolean
+}
+
+function Td ({
+  style,
+  children,
+  ellipsis = false,
+  ...props
+}: TdProps): ReactNode {
+  const $full = $()
+
+  useEffect(() => () => $full.del(), [$full])
+
+  const options: Record<string, any> = {}
+
+  if (ellipsis) {
+    options.onPress = () => $full.set(!$full.get())
+    if (!$full.get()) {
+      options.numberOfLines = 1
+      options.ellipsizeMode = 'tail'
+    }
+  }
+
+  return pug`
+    Div.root(
+      ...props
+      style=style
+    )
+      if typeof children === 'string'
+        Span(
+          ...options
+        )= children
+      else
+        = children
+
+  `
+}
+
+export default observer(themed('Td', Td))

package/Th/index.cssx.styl

@@ -0,0 +1,3 @@
+.root
+  padding 1u 2u
+  flex 1

package/Th/index.tsx

@@ -0,0 +1,56 @@
+import { useEffect, type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* ThProps */} // used in docs generation
+
+export interface ThProps extends DivProps {
+  /** Custom styles applied to the header cell container */
+  style?: StyleProp<ViewStyle>
+  /** Header cell content rendered inside */
+  children?: ReactNode
+  /** Collapse text into a single line with ellipsis, tap to toggle @default false */
+  ellipsis?: boolean
+}
+
+function Th ({
+  style,
+  children,
+  ellipsis = false,
+  ...props
+}: ThProps): ReactNode {
+  const $full = $()
+
+  useEffect(() => () => $full.del(), [$full])
+
+  const options: Record<string, any> = {}
+
+  if (ellipsis) {
+    options.onPress = () => $full.set(!$full.get())
+    if (!$full.get()) {
+      options.numberOfLines = 1
+      options.ellipsizeMode = 'tail'
+    }
+  }
+
+  return pug`
+    Div.root(
+      ...props
+      style=style
+    )
+      if typeof children === 'string'
+        Span(
+          ...options
+          bold
+        )= children
+      else
+        = children
+
+  `
+}
+
+export default observer(themed('Th', Th))

package/Thead/index.cssx.styl

@@ -0,0 +1,3 @@
+.bordered
+  border-color var(--color-border-main)
+  border-bottom-width 1px

package/Thead/index.tsx

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* TheadProps */} // used in docs generation
+
+export interface TheadProps extends DivProps {
+  /** Custom styles applied to the header container */
+  style?: StyleProp<ViewStyle>
+  /** Header content rendered inside */
+  children?: ReactNode
+  /** Add bottom border to the header @default true */
+  bordered?: boolean
+}
+
+function Thead ({
+  style,
+  children,
+  bordered = true,
+  ...props
+}: TheadProps): ReactNode {
+  return pug`
+    Div(
+      ...props
+      style=[style]
+      styleName=[{ bordered }]
+    )= children
+  `
+}
+
+export default observer(themed('Thead', Thead))

package/Tr/index.tsx

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+
+export const _PropsJsonSchema = {/* TrProps */} // used in docs generation
+
+export interface TrProps extends DivProps {
+  /** Custom styles applied to the row container */
+  style?: StyleProp<ViewStyle>
+  /** Row content rendered inside */
+  children?: ReactNode
+}
+
+function Tr ({ style, children, ...props }: TrProps): ReactNode {
+  return pug`
+    Div(
+      ...props
+      style=style
+      row
+    )= children
+  `
+}
+
+export default observer(themed('Tr', Tr))

package/index.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+export { default as Table, type TableProps } from './Table';
+export { default as Thead, type TheadProps } from './Thead';
+export { default as Tbody, type TbodyProps } from './Tbody';
+export { default as Tr, type TrProps } from './Tr';
+export { default as Th, type ThProps } from './Th';
+export { default as Td, type TdProps } from './Td';
+export { _PropsJsonSchema as TablePropsJsonSchema } from './Table';
+export { _PropsJsonSchema as TheadPropsJsonSchema } from './Thead';
+export { _PropsJsonSchema as TbodyPropsJsonSchema } from './Tbody';
+export { _PropsJsonSchema as TrPropsJsonSchema } from './Tr';
+export { _PropsJsonSchema as ThPropsJsonSchema } from './Th';
+export { _PropsJsonSchema as TdPropsJsonSchema } from './Td';

package/index.tsx

@@ -0,0 +1,13 @@
+export { default as Table, type TableProps } from './Table'
+export { default as Thead, type TheadProps } from './Thead'
+export { default as Tbody, type TbodyProps } from './Tbody'
+export { default as Tr, type TrProps } from './Tr'
+export { default as Th, type ThProps } from './Th'
+export { default as Td, type TdProps } from './Td'
+
+export { _PropsJsonSchema as TablePropsJsonSchema } from './Table'
+export { _PropsJsonSchema as TheadPropsJsonSchema } from './Thead'
+export { _PropsJsonSchema as TbodyPropsJsonSchema } from './Tbody'
+export { _PropsJsonSchema as TrPropsJsonSchema } from './Tr'
+export { _PropsJsonSchema as ThPropsJsonSchema } from './Th'
+export { _PropsJsonSchema as TdPropsJsonSchema } from './Td'

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/table",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}