@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
202 lines • 6.27 kB
JavaScript
export const TableProperties = {
mode: {
doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',
type: [`'accordion'`, `'navigation'`],
defaultValue: 'null',
status: 'optional'
},
accordionChevronPlacement: {
doc: 'Defines where the chevron will be placed, should only be used together with mode="accordion".',
type: [`'start'`, `'end'`],
defaultValue: `'start'`,
status: 'optional'
},
border: {
doc: 'Use `true` to show borders between table data cells.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
outline: {
doc: 'Use `true` to show an outline border around the table',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
sticky: {
doc: "Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.",
type: ['boolean', `'css-position'`],
defaultValue: 'false',
status: 'optional'
},
stickyOffset: {
doc: 'Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.',
type: ['string', 'number'],
defaultValue: 'false',
status: 'optional'
},
size: {
doc: 'Spacing size inside the table header and data.',
type: [`'large'`, `'medium'`, `'small'`],
defaultValue: `'large'`,
status: 'optional'
},
fixed: {
doc: 'If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.',
type: 'boolean',
defaultValue: 'null',
status: 'optional'
},
children: {
doc: 'The content of the component.',
type: 'React.ReactNode',
status: 'required'
},
className: {
doc: 'Custom className on the component root',
type: 'string',
defaultValue: 'undefined',
status: 'optional'
},
skeleton: {
doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
type: 'boolean',
defaultValue: 'undefined',
status: 'optional'
},
'[Space](/uilib/layout/space/properties)': {
doc: 'Spacing properties like `top` or `bottom` are supported.',
type: ['string', 'object'],
status: 'optional'
}
};
export const TableEventProperties = {
collapseAllHandleRef: {
doc: 'Ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.',
type: 'React.MutableRefObject<() => void>',
defaultValue: 'undefined',
status: 'optional'
}
};
export const TrProperties = {
variant: {
doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.',
type: [`'even'`, `'odd'`],
defaultValue: 'undefined',
status: 'optional'
},
noWrap: {
doc: 'If set to `true`, the inherited header text will not wrap to new lines.',
type: 'boolean',
defaultValue: 'true',
status: 'optional'
},
expanded: {
doc: 'Use `true` to render the `<Tr>` initially as expanded.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
disabled: {
doc: 'Use `true` to disable the `<Tr>` to be accessible as an interactive element.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
noAnimation: {
doc: 'Use `true` to disable the expand/collapse animation.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
keepInDOM: {
doc: 'When `true`, keeps the accordion content in the DOM when closed. Defaults to `false`.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
children: {
doc: 'The content of the component.',
type: 'React.ReactNode',
status: 'required'
}
};
export const TrEventProperties = {
onClick: {
doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row. Returns a native click.',
type: '(event) => void',
defaultValue: 'undefined',
status: 'optional'
},
onOpened: {
doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.',
type: '({ target }) => void',
defaultValue: 'undefined',
status: 'optional'
},
onClosed: {
doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.',
type: '({ target }) => void',
defaultValue: 'undefined',
status: 'optional'
}
};
export const ThProperties = {
variant: {
doc: 'Defines the visual style of the table header. Use `subtle` for a lighter appearance with reduced font-weight, smaller font-size, and muted text color.',
type: [`'emphasis'`, `'subtle'`],
defaultValue: `'emphasis'`,
status: 'optional'
},
sortable: {
doc: 'Defines the table header as sortable if set to `true` (ascending).',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
active: {
doc: 'Defines the sortable column as the current active (ascending).',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
reversed: {
doc: 'Defines the sortable column as in reversed order (descending).',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
noWrap: {
doc: 'If set to `true`, the header text will not wrap to new lines.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
children: {
doc: 'The content of the component.',
type: 'React.ReactNode',
defaultValue: 'undefined',
status: 'optional'
}
};
export const TdProperties = {
noSpacing: {
doc: 'If set to `true`, no padding will be added.',
type: 'boolean',
defaultValue: 'false',
status: 'optional'
},
spacing: {
doc: 'Set to `horizontal` for padding on left and right side.',
type: `'horizontal'`,
defaultValue: 'undefined',
status: 'optional'
},
children: {
doc: 'The content of the component.',
type: 'React.ReactNode',
defaultValue: 'undefined',
status: 'optional'
}
};
//# sourceMappingURL=TableDocs.js.map