Source

adminjs/src/frontend/components/app/records-table/records-table-header.tsx

  1. import React from 'react'
  2. import { CheckBox, TableHead, TableRow, TableCell } from '@adminjs/design-system'
  3. import PropertyHeader from './property-header'
  4. import { BasePropertyJSON } from '../../../interfaces'
  5. import { display } from './utils/display'
  6. /**
  7. * @memberof RecordsTableHeader
  8. * @alias RecordsTableHeaderProps
  9. */
  10. export type RecordsTableHeaderProps = {
  11. /**
  12. * Property which should be treated as a Title Property
  13. */
  14. titleProperty: BasePropertyJSON;
  15. /**
  16. * All properties which should be presented
  17. */
  18. properties: Array<BasePropertyJSON>;
  19. /**
  20. * Name of the property which should be marked as currently sorted by
  21. */
  22. sortBy?: string;
  23. /**
  24. * Sort direction
  25. */
  26. direction?: 'asc' | 'desc';
  27. /**
  28. * Handler function invoked when checkbox is clicked. If given extra column
  29. * with checkbox will be rendered
  30. */
  31. onSelectAll?: () => any;
  32. /**
  33. * Indicates if "bulk" checkbox should be checked
  34. */
  35. selectedAll?: boolean;
  36. }
  37. /**
  38. * Prints `thead` section for table with records.
  39. *
  40. * ```
  41. * import { RecordsTableHeader } from 'adminjs'
  42. * ```
  43. *
  44. * @component
  45. * @subcategory Application
  46. * @example <caption>List with 2 properties</caption>
  47. * const properties = [{
  48. * label: 'First Name',
  49. * name: 'firstName',
  50. * isSortable: true,
  51. * }, {
  52. * label: 'Last Name',
  53. * name: 'lastName',
  54. * }]
  55. * return (
  56. * <Box py="xl">
  57. * <Table>
  58. * <RecordsTableHeader
  59. * properties={properties}
  60. * titleProperty={properties[0]}
  61. * sortBy={'firstName'}
  62. * direction={'asc'}
  63. * />
  64. * <TableBody>
  65. * <TableRow>
  66. * <TableCell>John</TableCell>
  67. * <TableCell>Doe</TableCell>
  68. * <TableCell></TableCell>
  69. * </TableRow>
  70. * <TableRow>
  71. * <TableCell>Max</TableCell>
  72. * <TableCell>Kodaly</TableCell>
  73. * <TableCell></TableCell>
  74. * </TableRow>
  75. * </TableBody>
  76. * </Table>
  77. * </Box>
  78. * )
  79. */
  80. export const RecordsTableHeader: React.FC<RecordsTableHeaderProps> = (props) => {
  81. const {
  82. titleProperty, properties,
  83. sortBy, direction,
  84. onSelectAll, selectedAll } = props
  85. return (
  86. <TableHead>
  87. <TableRow>
  88. <TableCell>
  89. {onSelectAll ? (
  90. <CheckBox
  91. style={{ marginLeft: 5 }}
  92. onChange={(): void => onSelectAll()}
  93. checked={selectedAll}
  94. />
  95. ) : null}
  96. </TableCell>
  97. {properties.map(property => (
  98. <PropertyHeader
  99. display={display(property.isTitle)}
  100. key={property.propertyPath}
  101. titleProperty={titleProperty}
  102. property={property}
  103. sortBy={sortBy}
  104. direction={direction}
  105. />
  106. ))}
  107. <TableCell key="actions" style={{ width: 80 }} />
  108. </TableRow>
  109. </TableHead>
  110. )
  111. }
  112. export default RecordsTableHeader