FileTable

The FileTable component is a core UI element that displays files and folders in a table format, providing various actions like moving, organizing, and managing files.

Usage

import { FileTable } from '../components/FileTable'

function MyComponent() {
  return (
    <FileTable
      data={folderData}
    />
  )
}

Props

Name	Type	Required	Description
data	FileItem[]	Yes	The folder data to display
isLoading	boolean	No	Loading state of the data (defaults to false)
showProject	boolean	No	Whether to show project column (defaults to false)
title	string	No	Optional title to display above the table
isStarredView	boolean	No	Whether the table is showing starred items (defaults to false)

Features

File Actions

• Move files to different folders
• Move files to different projects
• Star/unstar files
• Delete files
• Rename files
• Share files and manage permissions

File Organization

The component supports organizing files through:

• Direct move operations
• Modal-based folder selection
• Project selection for moving across projects
• Permission inheritance and management

Internal Components

Action Handlers

const handleAction = async (type: ActionType, file: FileItem) => {
  switch (type) {
    case 'star':
      // Handle starring/unstarring based on view
      break
    case 'rename':
      // Handle rename via modal
      break
    case 'share':
    case 'organize':
    case 'moveToProject':
      // Handle via respective modals
      break
    case 'delete':
      // Handle deletion with confirmation
      break
  }
}

Move Operations

const handleOrganize = async (nodeId: string) => {
  if (selectedFile) {
    try {
      await moveToFolder({
        fileId: selectedFile._id,
        folderId: nodeId,
        fileType: selectedFile.type
      })
      handleModalClose()
    } catch (error) {
      console.error('Failed to move to folder:', error)
    }
  }
}

State Management

The component uses several hooks for state management:

• useSortedItems - For sorting and organizing items
• useFileModal - For managing modal state and selected files
• useFolderOperations - For folder operations like moving and deleting
• useFolderModals - For managing folder-related modal dialogs

Example with Full Features

import { FileTable } from '@components/FileTable'
import { useFolderData } from '@hooks/useFolderData'
import { useProjectContext } from '@contexts/ProjectContext'

function ProjectFiles() {
  const { projectId } = useProjectContext()
  const { data } = useFolderData(folderId, projectId)

  return (
    <div className="project-files">
      <h2>Project Files</h2>
      <FileTable
        data={data}
      />
    </div>
  )
}